清除浮動的6中方法總結
阿新 • • 發佈：2020-09-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style> /* 1.直接給父元素新增高度，有點low 2.父元素新增overflow: hidden; 3.父元素新增浮動，float: left 4.通過新增br標籤 <br clear='all' /> 5.通過clear: both 清楚浮動 6.偽元素清除浮動 父元素中新增樣式和偽元素樣式 *zoom: 1; :after{ content: ''; display: block; clear: both; }*/ * { margin: 0; padding: 0; } #wrap { border: 2px solid #ddd; /*1.直接給父元素新增高度，有點low*/ /*height: 300px;*/ /*2.父元素新增overflow: hidden;*/ /*overflow: hidden;*/ /*3.通過開啟BFC，父元素新增float: left*/ /*float: left;*/ } #inner { float: left; width: 200px; height: 200px; background-color: pink; } /*6.偽元素清除浮動*/ .clearFloat { *zoom: 1; } .clearFloat:after { content: ''; display: block; clear: both; } </style> </head> <body> <div id='wrap' class='clearFloat'> <div id='inner'> </div> <!--4.通過新增br標籤 <br clear='all' />--> <!--<br clear='all'>--> <!--5.通過clear: both 清楚浮動--> <!--<div style='clear: both;'></div>--> </div> </body> </html>