關于浮動
在標準的文檔流中徒扶，div元素會獨占一行，但在實際的布局中經常會遇到讓多個div顯示在一行中的需求，浮動就是解決這個需求的一種方法波附。浮動可以理解為讓元素脫離標準文檔流，漂浮于標準文檔流之上，和標準文檔流不在一個層次上掸屡。如下圖所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
background: #666;
}
.box{
width:50px;
height: 50px;
line-height: 50px;
text-align: center;
float:left;
}
.box:nth-child(odd){
background: tomato;
}
.box:nth-child(even){
background:wheat;
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
</body>
</html>
float.jpg
關于清除浮動
清除浮動可以用clear屬性封寞，取值：
-
none：元素不會向下移動清除之前的浮動,即允許兩邊有浮動對象 -
left：元素被向下移動用于清除之前的左浮動，即不允許左邊有浮動對象 -
right：元素被向下移動用于清除之前的右浮動仅财，即不允許右邊有浮動對象 -
both：元素被向下移動用于清除之前的左右浮動狈究，即不允許兩邊有浮動對象 -
inline-start：該關鍵字表示該元素向下移動以清除其包含塊的起始側上的浮動。即在某個區(qū)域的左側浮動或右側浮動盏求。 -
inline-end：該關鍵字表示該元素向下移動以清除其包含塊的末端的浮點抖锥，即在某個區(qū)域的右側浮動或左側浮動。
對于CSS的清除浮動(clear)碎罚，一定要牢記：這個規(guī)則只能影響使用清除的元素本身磅废，不能影響其他元素。
那么荆烈，如果清除第二個div左浮動拯勉，則：
.box:nth-child(2){
clear:left;
}
2-clear-left.png
因為清除浮動只能影響元素本身，為了使第二個div左邊沒有浮動元素耙考，又不能讓第一個div改變位置谜喊，所以只能使自己向下移動一行。這里注意倦始，即使給這個div清除右浮動斗遏，并不會有效果，因為它不能使后一個div改變位置鞋邑，只能作用在自己身上诵次。
關于父元素高度塌陷
同上的布局，可以發(fā)現枚碗，父元素.wrapper雖然設置了background,卻依然沒有效果逾一，因為浮動元素脫離了文檔流，即對父元素而言肮雨，并沒有元素占用了空間遵堵，所以高度無法撐開。通常有兩種方法可以解決怨规，清除浮動和BFC：
- 清除浮動
.wrapper::after{
content: '';
display: block;
clear: both;
}
這樣做的原理相當于在最后一個子元素后邊添加一個空div陌宿，因為清除了浮動，所以會到浮動元素的下面一行波丰，高度就撐開了壳坪。
- BFC
觸發(fā)BFC的方法有很多，詳見我寫的BFC章節(jié)掰烟，常見的方式可以是：
.wrapper{
overflow:hidden
}
height.jpg
