文檔流：文檔流是文檔中可顯示對象在排列時所占用的位置。
浮動：使元素脫離文檔流，按照指定方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停了下來。
浮動產(chǎn)生的影響
浮動與元素超出包含框的時候，包含框不會自動伸高來閉合浮動元素，叫做高度塌陷。
如下所示：.main 和 .side 不會撐高父元素 .wrap 的高度
// css代碼
<style>
.wrap { border: 2px solid gray ; width: 400px;}
.main { float: left;width: 200px;height: 100px; background-color: pink;}
.side { float: right;width: 150px;height: 100px;background-color: greenyellow;}
.footer { width: 300px; height: 100px; background-color: yellow; }
</style>
// html代碼
<div class="wrap" id="float1">
<h2>浮動</h2>
<div class="main left">.main{float:left;}</div>
<div class="side right">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
如何清除浮動
- 使用
clear : left|right|both|none; - 閉合浮動元素，減少浮動帶來的影響
使用clear屬性:
1.在浮動元素的后面添加<div style="clear:both;"></div>
<style>
.wrap { border: 2px solid gray; width: 400px;}
.main { float: left; width: 200px; height: 100px;background-color: pink;}
.side { float: right;width: 150px; height: 100px; background-color: greenyellow;}
.footer { width: 300px;height: 100px; background-color: yellow;}
</style>
<body>
<div class="wrap" id="float1">
<h2>clear清除浮動</h2>
<div class="main left">.main{float:left;}</div>
<div class="side right">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>
2.在浮動元素的后面添加<br clear="all">
將上一個例子中的<div style="clear:both;"></div>替換為<br clear="all">
父元素設(shè)置dispaly:table
在父元素的css中加入display:table，
.wrap{
border: 2px solid gray;
width: 400px;
height: 100px;
display: table;
}
父元素設(shè)置overflow: hidden;
在父元素的css中加入overflow: hidden
.wrap{
border: 2px solid gray;
width: 400px;
height: 100px;
overflow: hidden;
}
上面的例子中 .main 和 .side 中的一部分內(nèi)容溢出被隱藏，修改的辦法就是將
height: 100px;去掉，讓元素自己撐開父元素，或者是把height的值設(shè)大一點，讓元素不溢出就好了。
.wrap {
border: 2px solid gray;
width: 400px;
overflow: hidden;
}
還可以設(shè)置
overflow: auto;
添加:after偽元素
給父元素添加偽元素
.wrap:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
