Hãy xem thiết kế lưới của trang web và chia nhỏ các thành phần riêng lẻ. Hãy cùng khám phá lý do tại sao float lại hữu ích như vậy, cũng như kỹ thuật phổ biến để xây dựng lưới web đầu tiên từ ba luồng và một chân trang.
Để nghiên cứu việc xây dựng lưới của một địa điểm, bạn cần hiểu "dòng chảy" là gì. Dòng chảy là các yếu tố của trang web, nằm lần lượt. Ví dụ, đây có thể là các phần tử div đi lần lượt theo mặc định. Nhưng dòng chảy có thể được sắp xếp lại và vị trí của các phần tử khối có thể được thay đổi.
Để kiểm soát dòng chảy, chúng tôi sử dụng thuộc tính float, có thể đặt khối ở bên trái hoặc bên phải. Chỉ cần ghi vào tệp CSS là đủ:
"tên lớp hoặc khối" {float: right / left; }
Hạn chế duy nhất của float là khả năng "chồng chéo" một khối lên trên khối khác.
Để tránh chạy qua, chúng tôi sử dụng clear: both - thuộc tính này sẽ thiết lập luồng xung quanh khối. Chúng tôi đặt chiều rộng và chiều cao, tối đa và tối thiểu, để giá trị được hình thành theo kích thước của nội dung (văn bản, hình ảnh). Lề - đặt giá trị thành tự động để các lề bên ngoài được hình thành tự động tùy thuộc vào vị trí của khối.
Vì float có thể đặt các khối theo hai hướng, nên theo thông lệ, người ta chia trang web thành các luồng - trái và phải. Nếu người lập trình chỉ cần hai luồng, thì anh ta để các phao trái và phải, nhưng nếu có nhiều hơn hai, thì anh ta điều chỉnh các lề bằng cách sử dụng margin. Làm thế nào điều này xảy ra:
.column1 {float: left; chiều rộng: 65px; chiều cao tối thiểu: 50px; margin-right: 9px; // 9px từ hộp giữa}
2 luồng:
.column2 {float: left; // đến khối bên trái, nhưng không có "chồng chéo", vì chúng tôi đã áp dụng margin width: 80px; chiều cao tối thiểu: 50px; }
3 luồng:
.column3 {float: right; chiều rộng: 65px; chiều cao tối thiểu: 50px; }
Xử lý phần footer (.footer):
.footer {clear: cả hai; // quấn quanh cả hai bên}
Đây là cách chúng tôi tạo lưới cho trang web bằng cách sử dụng float, bao gồm ba luồng.
