清除浮動常見方法
- 給父級元素指定高度
- 額外寫一個div容器（放在父級容器內部）
- 偽類（:after,:before）推薦使用
.clearfix:after{
content:’’;/內容為空/
display:block;/如果有內容則轉化為塊級元素/
clear:both;/清除浮動/
/如果content內容不為空，則讓其隱藏掉/
visibility:hidden;
height:0;/高度為0/
zoom:1;/針對iE6及以下瀏覽器/
} - o
verflow:hidden;不建議使用
<!DOCTYPE html>
<html>
<head>
<title>清除浮動常見方法</title>
<style type="text/css">
.out {
border:1px solid blue;
/*
3.1 給父級元素指定高度，清除浮動帶來的效果
height:300px;*/
/*
3.4 添加屬性overflow，清除浮動帶來的效果
overflow:hidden;*/
}
/*
3.3 添加偽類，清除浮動
推薦使用*/
.clearfix:after{
content:'';/*內容為空*/
display:block;/*如果有內容則轉化為塊級元素*/
clear:both;/*清除浮動*/
/*如果content內容不為空，則讓其隱藏掉*/
visibility:hidden;
height:0;/*高度為0*/
zoom:1;/*針對iE6及以下瀏覽器*/
}
.inner_1 {
width:100px;
height:100px;
background:red;
float:left;
}
.inner_2 {
width:100px;
height:100px;
background:green;
float:left;
}
</style>
</head>
<body>
<!--
1.外部容器高度由內部內容撐開
問題：內部容器撤出（移出/脫離檔案流）？
導致：外部容器高度塌陷
2.外部容器高度不受內部內容影響
3.清除浮動
3.1 給父級元素指定高度
3.2 額外寫一個div容器（放在父級容器內部）
<div style="clear:both;"></div>
3.3 偽類（:after,:before）推薦使用
.clearfix:after{
content:'';/*內容為空*/
display:block;/*如果有內容則轉化為塊級元素*/
clear:both;/*清除浮動*/
/*如果content內容不為空，則讓其隱藏掉*/
visibility:hidden;
height:0;/*高度為0*/
zoom:1;/*針對iE6及以下瀏覽器*/
}
3.4 overflow:hidden;不建議使用
-->
<div class="out clearfix">
<div class="inner_1"></div>
<div class="inner_2"></div>
<!--
3.2 添加額外容器div，清除浮動 -->
<!-- <div style="clear:both;"></div> -->
</div>
<!-- -->
<div class="out_1">
<div class="inner_1"></div>
<div class="inner_2"></div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/201823.html
標籤：其他
上一篇：nvidia tegra soc 的bct檔案讀取方法
下一篇：gin使用自定義結構系結表單資料