1知残、浮動的定義
使元素脫離文檔流，按照指定方向（左右）發(fā)生移動绘闷，
遇到父級邊界或者相鄰的浮動元素停了下來橡庞。
文檔流
是文檔中可顯示對象在排列時所占用的位置/空間(在頁面中占位置)
脫離文檔流：在頁面中不占位置
（1）浮動一般情況
當把框 1 向右浮動時，它脫離文檔流并且向右移動印蔗，
直到它的右邊緣碰到包含框的右邊緣
image.png
image.png
image.png
（2）浮動特殊情況
1扒最、當框 1 向左浮動時，框1不占空間华嘹，相當于懸浮吧趣，
框1覆蓋住了框 2，使框 2 從視圖中消失耙厚。
image.png
2强挫、給了浮動的元素，只會影響后面的元素薛躬；(任何元素都可以浮動)
如果父級寬度太窄俯渤，無法容納所有的浮動元素，無法容納的浮動
元素會往下掉
image.png
3型宝、如果浮動元素的高度不同八匠，那么當它們向下移動時?可能被其它浮動元素“卡住”
image.png
3、浮動對文字影響
浮動框旁邊的行框被縮短趴酣，從而給浮動框留出空間梨树，行框圍繞浮動框。
因此岖寞，創(chuàng)建浮動框可以使文本圍繞圖像
image.png
4抡四、浮動和inline-block的對比
image.png
5、清除浮動
浮動導致父元素的塌陷仗谆，所以要清除浮動
清除浮動 clear:
left right both none
清除浮動的方法
1指巡、子級辦法
子級最后添加空標簽
父級辦法
1、加高 問題：擴展性不好
2隶垮、inline-block 清浮動方法 問題：margin:auto;失效
3厌处、overflow:hidden 清浮動方法； 問題：要配合寬度
4岁疼、after偽元素內(nèi)部末尾添加內(nèi)容 時下主流
.clearfix{zoom:1;}.
clearfix:after{content:'';display:block;clear:both;}
6設(shè)置元素寬度大小值min-width
設(shè)置元素的最小寬度
max-width
設(shè)置元素的最大寬度
