Tại sao rõ ràng: quyền không hoạt động như dự định

Question

Tôi luôn bị nhầm lẫn bởi clear: left, clear: right và clear: both trong CSS. Tôi biết clear: both có nghĩa là nó không cho phép các phần tử nổi trên cả hai mặt của chính nó.

Tôi đã thực hiện một số thử nghiệm here. Tôi nghĩ bố cục sẽ xuất hiện như dưới đây, bởi vì B sử dụng clear: both. Nhưng nó không. Ai đó có thể cho tôi biết tại sao?

Một
B
CD

Cập nhật (Post mã)

<div class="container"> 
    <div class="A">a</div> 
    <div class="B">b</div> 
    <div class="C">c</div> 
    <div class="D">d</div> 
    <div class="CB"></div> 
</div> 

.container{ 
    width:100%; 
    border:1px solid red;  
} 
.B{ 
    float:left; 
    clear:both; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.A,.C,.D{ 
    float:left; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.CB{ 
    clear:both; 
} 

Answer 1

clear trên một yếu tố chỉ xoá nổi trước nó theo thứ tự tài liệu. Nó không xóa phao nổi sau. Giá trị left và right có nghĩa là giải phóng mặt bằng của phao nổi và phao bên phải trước phần tử tương ứng. Họ không có nghĩa là thanh toán bù trừ phao trước và sau phần tử.

Vì C đang được thả nổi, nhưng không có bất kỳ giải phóng mặt bằng nào được áp dụng, nó nổi bên cạnh B. B không cố gắng xóa C vì C đến sau nó trong cấu trúc tài liệu.

Hơn nữa, clear: right không có bất kỳ ảnh hưởng nào trong trường hợp thử nghiệm của bạn vì không có phần tử nào của bạn đang được thả sang bên phải.

Answer 2

Bạn có thể có một rõ ràng rằng hoạt động sau khi div nếu bạn sử dụng:

.clr:after { 
visibility: hidden; 
display: block; 
content: ""; 
clear: both; 
height: 0; 
}