Sử dụng CSS float Property để thiết kế trang web Layouts
Thuộc tính CSS là thuộc tính rất quan trọng cho bố cục. Nó cho phép bạn định vị các thiết kế trang web của bạn chính xác như bạn muốn chúng hiển thị - nhưng để sử dụng nó, bạn phải hiểu cách nó hoạt động.
Trong một bảng định kiểu, thuộc tính float CSS trông như sau:
.right {float: right; }
Điều này cho trình duyệt biết rằng mọi thứ với lớp “right” phải được thả sang bên phải.
Bạn sẽ gán nó như thế này:
class = "right" />
Bạn có thể nổi gì với thuộc tính float CSS?
Bạn không thể nổi mọi phần tử trên trang web. Bạn chỉ có thể nổi các phần tử mức khối . Đây là những yếu tố chiếm một khối không gian trên trang, như hình ảnh (), đoạn văn (), phân chia () và danh sách ().
Các yếu tố khác ảnh hưởng đến văn bản, nhưng không tạo một hộp trên trang được gọi là các phần tử nội tuyến và không thể được thả nổi. Đây là những yếu tố như span (), ngắt dòng (), nhấn mạnh mạnh () hoặc in nghiêng ().
Nơi nào họ nổi?
Bạn có thể thả nổi các phần tử bên phải hoặc bên trái. Bất kỳ phần tử nào theo phần tử lưu hành sẽ chạy quanh phần tử nổi ở phía bên kia.
Ví dụ, nếu tôi thả nổi một hình ảnh ở bên trái, bất kỳ văn bản hoặc các yếu tố khác theo sau nó sẽ chạy quanh nó ở bên phải. Và nếu tôi thả nổi một hình ảnh ở bên phải, bất kỳ văn bản hoặc các yếu tố nào khác theo sau nó sẽ chảy xung quanh nó sang bên trái. Một hình ảnh được đặt trong một khối văn bản mà không có bất kỳ kiểu float nào được áp dụng cho nó sẽ hiển thị tuy nhiên trình duyệt được đặt để hiển thị hình ảnh.
Điều này thường là với dòng đầu tiên của văn bản sau được hiển thị ở dưới cùng của hình ảnh.
Họ sẽ nổi bao xa?
Một phần tử đã được thả nổi sẽ di chuyển xa đến bên trái hoặc bên phải của phần tử thùng chứa nhất có thể. Điều này dẫn đến một số tình huống khác nhau tùy thuộc vào cách viết mã của bạn.
Đối với những ví dụ này, tôi sẽ thả một phần tử DIV nhỏ sang bên trái:
- Nếu phần tử lưu hành không có độ rộng được xác định trước, nó sẽ chiếm nhiều không gian ngang theo yêu cầu và có sẵn, bất kể float. Lưu ý: một số trình duyệt cố gắng đặt các phần tử bên cạnh các phần tử thả nổi khi chiều rộng không được xác định — thường cho phần tử không được thả nổi chỉ một lượng nhỏ không gian. Vì vậy, bạn nên luôn luôn xác định chiều rộng trên các phần tử nổi.
- Nếu phần tử vùng chứa là phần tử HTML, DIV nổi sẽ nằm ở lề trái của trang.
- Nếu phần tử thùng chứa chính nó được chứa bởi cái gì khác, DIV nổi sẽ nằm ở lề trái của thùng chứa.
- Bạn có thể lồng các phần tử nổi, và điều đó có thể dẫn đến kết quả nổi ở một nơi đáng ngạc nhiên. Ví dụ, phao này là một DIV nổi bên trái bên trong một DIV nổi bên phải.
- Các phần tử nổi sẽ nằm cạnh nhau nếu có chỗ trong thùng chứa. Ví dụ: vùng chứa này có ba phần tử DIV rộng 100px được thả nổi trong vùng chứa rộng 400px.
Bạn thậm chí có thể sử dụng phao nổi để tạo bố cục bộ sưu tập ảnh. Bạn đặt mỗi hình thu nhỏ (nó hoạt động tốt nhất khi chúng có cùng kích thước) trong một DIV với chú thích và thả nổi các phần tử DIV trong vùng chứa.
Cho dù cửa sổ trình duyệt có rộng đến mức nào, các hình thu nhỏ sẽ xếp hàng đồng nhất.
Tắt phao
Một khi bạn biết làm thế nào để có được một yếu tố nổi, điều quan trọng là phải biết cách tắt phao. Bạn tắt phao với thuộc tính CSS rõ ràng. Bạn có thể xóa các phao nổi bên trái, phao nổi hoặc cả hai:
rõ ràng: trái;
rõ ràng: đúng;
rõ ràng: cả hai;
Bất kỳ phần tử nào bạn đặt thuộc tính rõ ràng cho sẽ xuất hiện bên dưới phần tử được thả theo hướng đó. Ví dụ, trong ví dụ này, hai đoạn đầu tiên của văn bản sẽ không bị xóa, nhưng phần thứ hai là.
Chơi với giá trị rõ ràng của các yếu tố khác nhau trong tài liệu của bạn để có được các hiệu ứng bố cục khác nhau.
Một trong những bố trí nổi bật thú vị nhất là một loạt các hình ảnh xuống cột bên phải hoặc bên trái bên cạnh các đoạn văn bản. Ngay cả khi văn bản không đủ dài để cuộn qua hình ảnh, bạn có thể sử dụng hình ảnh rõ ràng trên tất cả các hình ảnh để đảm bảo rằng chúng xuất hiện trong cột thay vì bên cạnh hình ảnh trước đó.
HTML (lặp lại đoạn này):
Duis aute irure dolor sed làm eiusmod tempor incididunt trong reprehenderit trong voluptate. Cupidatat không phải là chủ nhân, bạn có thể sử dụng nó.
CSS (để thả hình ảnh sang bên trái):
img.float {float: left;
rõ ràng: trái;
lề: 5px;
}
Và bên phải:
img.float {float: right;
rõ ràng: đúng;
lề: 5px;
}
Sử dụng nổi cho bố cục
Một khi bạn hiểu cách tính chất float hoạt động, bạn có thể bắt đầu sử dụng nó để bố trí các trang web của bạn. Đây là các bước tôi thực hiện để tạo trang web nổi:
- Thiết kế bố trí (trên giấy hoặc trong một công cụ đồ họa hoặc trong đầu của tôi).
- Xác định vị trí các đơn vị trang sẽ có.
- Xác định chiều rộng của các vùng chứa khác nhau và các phần tử bên trong chúng.
- Float tất cả mọi thứ. Ngay cả phần tử container ngoài cùng cũng được chuyển sang bên trái để tôi biết nó sẽ liên quan đến cổng xem trình duyệt ở đâu.
Miễn là bạn biết độ rộng (phần trăm là tốt) của các phần bố cục của bạn, bạn có thể sử dụng thuộc tính float để đặt chúng ở nơi chúng thuộc về trang. Và điều tốt đẹp là, bạn không phải lo lắng nhiều về mô hình hộp là khác nhau cho Internet Explorer hoặc Firefox.