清除浮動的四種方法：額外標簽法，overflow：hidden，單偽元素法和雙偽元素法
阿新 • • 發佈：2018-04-08
new ont nbsp ola 圖片 分享 col ons pac
當給浮動的元素增加了一個父級元素，但是又不方便給高度的情況下
（父盒子給高度也是一個解決方法，但是大多數情況下，因為盒子的內容會經常改變，父盒子高度固定，需要每次去調整）
此時可以使用下面的四種方法來清除浮動，解決父級元素高度為零導致影響下面盒子的問題
<body> <div > <div class="red"></div> <div class="blue"></div> </div> <div class="box1"></div></body>
<style type="text/css"> .box{ width: 800px; background: rgb(17, 12, 12); } .red{ background:red; width: 200px; height: 200px; float: left; } .blue{ background: blue; width: 200px; height: 200px; float: left; } .box1{ background: rgb(154, 184, 24); width: 300px; height: 300px; } </style>
.box { height: 200px; }
盒子內容不固定，需要隨內容的改變而改變，就需要清除浮動，有下面這4種方法：
1.第一種方法，在最後一個浮動的標簽後面增加一個盒子並設置clear：both
<body> <div> <div class="red"></div> <div class="blue"></div> <div class="addbox"></div> </div> <div class="box1"></div> </body>
.addbox{ width: 100px; clear: both; }
2.第二種方法：父級盒子設置overflow：hidden；觸發bfc
.box{ overflow: hidden; }
3.第三種單偽元素標簽法
.clearfix:after{ content: ""; height: 0; overflow: hidden; visibility: hidden; display: block; clear: both; } .clearfix { zoom: 1;/*兼容IE*/ }
同時，給父盒子一個類名clearfix
<body> <div class="box clearfix"> <div class="red"></div> <div class="blue"></div> </div> <div class="box1"></div> </body>
4.第四種雙偽元素標簽法
.clearfix :before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix { zoom: 1;/*兼容IE*/ }
同時，給父盒子一個類名clearfix
<body> <div class="box clearfix"> <div class="red"></div> <div class="blue"></div> </div> <div class="box1"></div> </body>
清除浮動的四種方法：額外標簽法，overflow：hidden，單偽元素法和雙偽元素法