CSS Float

21/05/2019

Bài sau » « Bài trước

Thuộc tính CSS Float xác định cách phần tử HTML trôi nổi (float). Thường được dùng để chia cột cho layout website, hoặc định dạng nội dung. Ví dụ như cho hình ảnh float left và nội dung nằm bên phải. 

Thuộc tính CSS float nhận 1 trong 4 giá trị sau:

  • left : Phần tử nổi về bên trái trong container chứa nó.
  • right : Phần tử nổi về bên phải trong container chứa nó.
  • none : Thuộc tính mặc định. Phần tử hiển thị theo thứ tự bình thường theo cấu trúc HTML.
  • inherit : Phần tử thừa kế giá trị float của phần tử cha nó.

Ví dụ, Ta có đoạn HTML như sau:

<p> <img src="example.jpg" alt="ví dụ CSS float " style="width:170px;height:170px;" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. </p>

Khi cho thẻ img float: right; ta được kết quả:

img{ float: right; width: 150px; height: 150px; margin-left: 15px; }

Thuộc tính CSS Float

Khi cho thẻ img float: left; ta được kết quả:

img{ float: left; width: 150px; height: 150px; margin-right: 15px; }

Thuộc tính CSS Float

Và khi ta không sử dụng float - mặc định là float: none; thì ta được kết quả:

img{ float: none; width: 150px; height: 150px; margin-right: 15px; }

Thuộc tính CSS Float

Tạo grid với float

Với thuộc tính float ta dễ dàng tạo bố cục cho layout.

Ví dụ ta có cấu trúc HTML :

<div class="box-contains" > <div class="box-left" >Sidebar left</div> <div class="box-content" >Nội dung ở giữa</div> <div class="box-right" >Sidebar right</div> </div>

Code CSS chia layout với float :

.box-left{ float: left; width: 25%; background: #eee; height: 100px; } .box-content{ float: left; width: 50%; background: tomato; height: 100px; } .box-right{ float: left; width: 25%; background: #ccc; height: 100px; }

Sidebar left
Nội dung ở giữa
Sidebar right

Thuộc tính clear

Thuộc tính clear sinh ra để khắc phục hậu quả để lại của float.

Thuộc tính clear có thể nhận 1 trong các thuộc tính sau:

  • none: Đây là thuộc tính mặc định. Cho phép các phần tử float trên cả 2 hướng (left, right).
  • left: Không có phần tử float ở phía left. 
  • right: Không có phần tử float ở phía right.
  • both: Không có phần tử float ở 2 hướng (left, right).
  • inherit: Phần tử thừa kế giá trị clear của phần tử cha.

Khi phần tử có sử dụng float, thì phần tử cha của nó bị mất chiều cao bao quanh phần tử này. Do đó, ta phải có thuộc tính clear ở phía sau phần tử float cuối cùng để trả lại chiều cao cho phần tử cha của nó.

Khi các phần tử có sử dụng float, chiều cao các phần tử không bằng nhau, phần tử ở hàng dưới nằm vị trí sai không đúng ý mong muốn. Và ta cũng dùng clear để nó float về đúng vị trí (left or right). Trường hợp này thường gặp đối với list sản phẩm có nhiều hàng và mỗi item sản phẩm có chiều cao không đồng nhất.

Xem ví dụ dưới: Thẻ <ul> bị mất chiều cao do các <li> có float: left;

  • Div 1
  • Div 2
  • Div 3

Thẻ <p> ở dưới bị ảnh hưởng bởi float ở trên và kết quả là <p> bị tràn lên trên.

ul{ border: 1px solid red; list-style: none; } ul li{ float: left; padding: 10px; background: #eee; border: 1px solid blue; }

Đối với ví dụ trên. Ở thẻ <p> ở dưới ta cho clear: left; là thẻ <p> sẽ về vị trí bình thường bên trái.

ul{ border: 1px solid red; list-style: none; } ul li{ float: left; padding: 10px; background: #eee; border: 1px solid blue; } p{ clear: left; }

  • Div 1
  • Div 2
  • Div 3

Thẻ <p> ở dưới được clear: left. Nên nó không bị float lên trên nữa.

Tạo class Clearfix

Dùng overflow: auto; . Ở ví dụ trên thẻ <ul> ta cho thuộc tính overflow auto là được. 

ul{ border: 1px solid red; list-style: none; overflow: auto; } ul li{ float: left; padding: 10px; background: #eee; border: 1px solid blue; }

  • Div 1
  • Div 2
  • Div 3

Hoặc ta có thể tạo class="clearfix" để tái sử dụng nhiều lần. Chỉ cần cho class này nằm ở phần tử cha của phần tử con có thuộc tính float. Đối với ví dụ trên ta cho vào thẻ <ul>.

.clearfix:after { content: ""; clear: both; display: table; }

Chú ý: Bạn sẽ học :after ở bài học sau.

Vậy là bài học về CSS Float và cách khắc phục với Clear đến đây là kết thúc. Hi vọng các bạn nắm vững nó vì đây là một trong những thuộc tính CSS quan trọng trong website.

Bài sau » « Bài trước
Back to top