css-清除浮動
阿新 • • 發佈：2021-04-30
文章目錄
一、為什麼要清除浮動？
因為父級盒子在很多情況下，無法給出固定高度（例如：手機頁面新增新品），而子盒子浮動不佔位置，最後父級盒子高度為0時，就會影響到下面的標準流盒子。
二、清除浮動的本質
- 本質是清除浮動元素造成的影響
- 如果父盒子本身有高度，就不需要清除浮動
- 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度（當父盒子有高度之後，就不會影響下面的標準流了）
三、清除浮動方法
語法
選擇器{clear:屬性值;}
| 屬性值 | 描述 |
|---|---|
| both | 同時清除左右兩側浮動的影響 |
| left | 清除左側浮動的影響 |
| right | 清除右側浮動的影響 |
方法一：額外標籤法（隔牆法）
在浮動元素後面加一個空標籤（必須是塊級元素）
.clear {
clear: both;
}
<div class="clear"></div>
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
} 方法二：父級新增overflow
將overflow的屬性值設定為hidden、auto或scroll
缺點：無法顯示溢位部分
.box {
/* 清除浮動 */
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
<style>
.box {
/* 清除浮動 */
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
方法三：:after 偽元素法
額外標籤法升級版
優點：結構中無需新增一行，優化了結構，css樣式中新加了個盒子
固定程式碼：
<style>
.clearfix:after {
content: "";
/* 轉換成塊內元素 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 專有 */
*zoom: 1;
}
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
方法四：雙偽元素清除浮動
即在css樣式中前後都加一個盒子
<style>
/* 前後都加上一個盒子 */
.clearfix:before,
.clearfix:after {
content: "";
/* 轉換為表格 */
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* 照顧低版本瀏覽器 相容性問題 */
*zoom: 1;
}
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<!-- 多類名 -->
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>