Clear trong CSS là gì?

Trong khoảng 5 đến 7 năm gần đây, thì xu hướng front-end không còn ưu chuộng dựng giao diện bằng với thẻ table nữa và thay vào đó họ chuyển sang dùng các khối thẻ được CSS với thuộc tính float để dàn trang. Và đến thời điểm mình viết bài này thì các dàn trang với thuộc tính float vẫn còn thình hành.

1, Thuộc tính float trong CSS.

-Thuộc tính float trong CSS có tác dụng xác định xem thành phần được chọn được hiển thị (nổi) như thể nào.

Cú Pháp:

selector{
    float: value;
}

Trong đó value có thể là 1 trong 4 giá trị sau:

• left - xác định thành phần được nổi về phía bên trái.
• right - xác định thành phần được nổi về phía bên phải.

• 
  
  
      
      
      
      
  
  
      
  Thẻ div float: right
  
  

  0 - xác định thành phần không được nổi về phía nào(mặc định).

• 
  
  
      
      
      
      
  
  
      
  Thẻ div float: right
  
  

  1 - xác định thành phần thừa hưởng thuộc tính từ thành phần cha.

VD: Dịch chuyển thẻ

    
    
    
    


    
Thẻ div float: right

    
    
    
    


    
Thẻ div float: right

Xem Kết Quả

Chú ý

-Khi một thành phần được CSS float là left hoặc right thì tất cả các thẻ cùng cấp phía sau nó sẽ được tràn lên phía trên và lấp đầy chỗ trống của hàng chứa thẻ được CSS float left hoặc right.

VD: Mình sẽ tạo thêm một thẻ

    
    
    
    


    
Thẻ div float: right

    
    
    
    


    
Thẻ div float: right

    
    
    
    


    
Thẻ div float: right
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Xem Kết Quả

- Và cũng tương tự với thẻ div là float left.

Xem Kết Quả

2, Thuộc tính clear trong CSS.

-Thuộc tính clear trong CSS có tác dụng loại bỏ các thuộc tính float (left - right) trên một thành phần. Để giải quyết vấn đề trong mục chú ý của thuộc tính float phía trên.

Cú Pháp:

selector{
    clear: value;
}

Trong đó value là một trong các giá trị sau:

• left - xóa bỏ float: left.
• right - xóa bỏ float: right.

• 
  
  
      
      
      
      
  
  
      
  Thẻ div float: right
  
  

  8 - xóa bỏ cả float:left và float: right.

• 
  
  
      
      
      
      
  
  
      
  Thẻ div float: right
  
  

  0 - không xóa bỏ gì cả (mặc định).

• 
  
  
      
      
      
      
  
  
      
  Thẻ div float: right
  
  

  1 - thừa hưởng giá trị từ thành phần cha. 

VD: Mình sẽ xóa bỏ

    
    
    
    


    
Thẻ div float: right
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    
    
    
    


    
Thẻ div float: right

    
    
    
    


    
Thẻ div float: right

    
    
    
    


    
Thẻ div float: right
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Xem Kết Quả

3, Dàn trang đơn giản

-Sau khi đã được giới thiệu về thuộc tính float và clear trong CSS rồi, thì giờ chúng ta sẽ cùng đi vào dàn một trang đơn giản có mẫu như sau:

Xây dựng HTML:

-Nhìn vào hình trên thì chúng ta sẽ có được cấu trúc HTML như sau:

Xem Kết Quả

-Khi chưa có CSS quả thật nhìn rất tệ đúng không? Giờ mình sẽ css cho nó ra như hình nhé:

.wapper{
    width: 1170px;
    text-align: center;
    margin: 0 auto;
}
.wapper .header{
    background-color: #39b54a;
    height: 100px;
}
.main{
    width: 870px;
    float: left;
    background-color: #a3d39c;
}
.widget{
    width: 300px;
    float:left;
    background-color: #6de17d
}
.wapper .footer{
    background-color: #39b54a;
    height: 100px;
}
.clear{
    clear: left;
}

Xem Kết Quả

4, Lời kết.

-Hai thuộc tính này sẽ được sử dụng thường xuyên trong quá trình thiết kế front-end nên mọi người chú ý giúp mình nhé!

Lệnh clear có công dụng gì?

The Float là gì?

Giá trị mặc định của thuộc tính Clear là gì?

Khi nào dùng float trong CSS?