防止父元素坍塌的清楚浮動clear
阿新 • • 發佈：2017-06-26
-s 其中 ply boa ots red ahp uga iat
如果父元素沒有設置高度，其中子元素全部帶float屬性，父元素內部將沒有任何普通流元素而坍塌。
想要解決這件事情，只需添加一個空的塊狀子元素，並設置clear屬性，即可讓父元素自動包裹該元素，
從而達到包裹所有浮動子元素的目的。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <style> .container{ margin:30px auto; width:600px; height:300px; border-style:dotted } .p{ border:solid 3px red; } .c{ width:100px; height:100px; background-color:green; margin:10px; float:left; } /* 利用偽類實現清楚浮動 */ .p:after{ content:""; display:block; clear:left; } </style> <body> <div class="container"> <div class="p"> <div class="c"></div> <div class="c"></div> <div class="c"></div>
/* 也可以追加一個div來實現清楚浮動 原理是一樣的，都是新加一個塊級元素來清楚浮動，讓父元素包裹自己 */
<div style="clear:left"></div>
</div> </div> </body> </html>
效果如下：
防止父元素坍塌的清楚浮動clear