Lý do
Vấn đề là các phần tử nổi nằm ngoài luồng :
Một phần tử được gọi là hết dòng nếu nó được thả nổi, định vị tuyệt đối hoặc là phần tử gốc.
Do đó, chúng không tác động đến các yếu tố xung quanh như một yếu tố trong dòng chảy .
Điều này được giải thích trong 9.5 Floats :
Vì phao không nằm trong luồng, các hộp khối không định vị được tạo trước và sau hộp phao chảy theo chiều dọc như thể phao không tồn tại. Tuy nhiên, các hộp dòng hiện tại và tiếp theo được tạo bên cạnh phao được rút ngắn khi cần thiết để nhường chỗ cho hộp lề của phao.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
Điều này cũng được quy định trong 10.6 Tính chiều cao và tỷ suất lợi nhuận . Đối với các khối "bình thường" ,
Chỉ có trẻ em trong dòng chảy bình thường được tính đến (ví dụ: hộp nổi và hộp được định vị tuyệt đối bị bỏ qua [V]]
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 130px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
Giải pháp Hacky: giải phóng mặt bằng
Một cách để giải quyết vấn đề là buộc một số phần tử trong dòng được đặt bên dưới tất cả các số float. Sau đó, chiều cao của cha mẹ sẽ phát triển để bọc phần tử đó (và do đó cũng nổi).
Điều này có thể đạt được sử dụng các cleartài sản :
Thuộc tính này cho biết các cạnh của hộp phần tử có thể không
liền kề với hộp nổi trước đó.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 84px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.clear {
clear: both;
text-align: center;
height: 37px;
border: 3px dashed pink;
}
.clear:after {
position: static;
content: 'Block sibling with clearance';
color: pink;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
<div class="clear"></div>
</div>
Vì vậy, một giải pháp là thêm một phần tử trống với clear: bothtư cách là anh chị em cuối cùng của phao
<div style="clear: both"></div>
Tuy nhiên, đó không phải là ngữ nghĩa. Vì vậy, tốt hơn nên tạo một phần tử giả ở cuối phần cha mẹ:
.clearfix::after {
clear: both;
display: block;
}
Có nhiều biến thể của phương pháp này, ví dụ: sử dụng cú pháp dấu hai chấm đơn không dùng nữa :afterđể hỗ trợ các trình duyệt cũ hoặc sử dụng các màn hình cấp khối khác như display: table.
Giải pháp: rễ BFC
Có một ngoại lệ đối với hành vi có vấn đề được xác định ngay từ đầu: nếu một phần tử khối thiết lập Bối cảnh định dạng khối (là gốc BFC), thì nó cũng sẽ bọc nội dung nổi của nó.
Theo 10.6.7 'Độ cao' tự động cho các gốc ngữ cảnh định dạng khối ,
Nếu phần tử có bất kỳ hậu duệ nổi nào có cạnh lề dưới nằm dưới cạnh nội dung dưới cùng của phần tử, thì chiều cao được tăng lên để bao gồm các cạnh đó.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent.bfc-root:after {
content: 'BFC parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 127px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="block-parent bfc-root">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
Ngoài ra, như đã giải thích 9,5 Floats , rễ BFC cũng hữu ích vì những điều sau đây:
Hộp viền của bảng, phần tử được thay thế ở cấp độ khối hoặc một phần tử trong luồng bình thường thiết lập bối cảnh định dạng khối mới [Biệt] không được chồng lên hộp lề của bất kỳ số float nào trong cùng bối cảnh định dạng khối như chính phần tử .
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
Một bối cảnh định dạng khối được thiết lập bởi
Chặn các hộp overflowkhác visible, vdhidden
.bfc-root {
overflow: hidden;
/* display: block; */
}
Chặn các thùng chứa không phải là hộp chặn: khi displayđược đặt thành inline-block, table-cellhoặc table-caption.
.bfc-root {
display: inline-block;
}
Các phần tử nổi: khi floatđược đặt thành lefthoặc right.
.bfc-root {
float: left;
}
Các yếu tố hoàn toàn định vị: khi positionđược đặt thành absolutehoặc fixed.
.bfc-root {
position: absolute;
}
Lưu ý rằng những hiệu ứng này có thể có các hiệu ứng tài sản thế chấp không mong muốn, như cắt nội dung tràn, tính toán độ rộng tự động với thuật toán thu nhỏ để phù hợp hoặc trở nên lỗi thời. Vì vậy, vấn đề là không thể có phần tử cấp khối trong luồng với tràn tràn có thể nhìn thấy để thiết lập BFC.
Hiển thị L3 giải quyết các vấn đề này:
Tạo các kiểu hiển thị bên trongflow và bên trong để thể hiện tốt hơn các kiểu hiển thị bố cục luồng và để tạo một công tắc rõ ràng để tạo một phần tử là gốc BFC . (Điều này sẽ loại bỏ sự cần thiết của các bản hack như và [Bắn])flow-root ::after { clear: both; }overflow: hidden
Đáng buồn thay, không có hỗ trợ trình duyệt nào. Cuối cùng, chúng tôi có thể sử dụng
.bfc-root {
display: flow-root;
}