有些學生提到還要多一個 clear div 來清除會把 HTML 弄髒,
這裡老師也分享一個是使用 父元素 增加清除浮動的語法,要清除浮動的內容就在父元素加上 clearfix 的 class 就大功告成,兩個清除浮動的用法就視情況來使用哩
-清除浮動前:
html:
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.content{
background: orange;
margin: 0 auto;
padding: 30px;
width: 500px;
}
.left{
background: blue;
height: 300px;
width: 100px;
float: left;
}
.right{
background: red;
height: 300px;
width: 100px;
float: right;
}
-清除浮動後:
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.content{
background: orange;
margin: 0 auto;
padding: 30px;
width: 500px;
}
.left{
background: blue;
height: 300px;
width: 100px;
float: left;
}
.right{
background: red;
height: 300px;
width: 100px;
float: right;
}
.clearfix:after{
content:'';
display:table;
clear:both;
}