Thuộc tính float và phần tử cha không có văn bản trong CSS
Bây giờ giả sử chúng ta có một thẻ div với lớp parent
không có văn bản, nhưng có hai phần tử con là khối
với lớp child:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Hãy làm cho các phần tử con trở thành phần tử nổi về phía bên trái và xem điều gì sẽ xảy ra:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Như chúng ta thấy, các phần tử con đã xếp thành một hàng, tuy nhiên, chiều cao của phần tử cha đã biến mất và các khối của chúng ta đã tràn ra ngoài nó ở phía dưới.
Hành vi này chúng ta đã biết. Để giải quyết vấn đề cần sử dụng clearfix. Hãy thực hiện điều đó:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="clearfix"></div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
.clearfix {
clear: both;
}
:
