一法严、float 的本質(zhì)與特性
float本來(lái)是為了實(shí)現(xiàn)文字環(huán)繞效果而設(shè)計(jì)的芥被，但是現(xiàn)在被用于設(shè)定寬高的砌磚頭的布局方式肥哎，稍有改動(dòng)就會(huì)樣式錯(cuò)亂辽俗，所以建議：浮動(dòng)是魔鬼，少砌磚頭少浮動(dòng)篡诽，更多的去挖掘css世界本身的流動(dòng)行和自適應(yīng)性
css2的重點(diǎn)還是圖文展示崖飘，但是現(xiàn)在比較流行更為絢麗餓的詩(shī)句效果和更為豐富的網(wǎng)頁(yè)布局，所以杈女，flex彈性盒子布局出現(xiàn)朱浴，讓 大家不得不去以自適應(yīng)的方式實(shí)現(xiàn)布局
float又如下的特性：
包裹性 （
float元素是里邊子元素的最大值）塊狀化并格式化上下文
破壞文檔流
-
沒(méi)有任何的
margin合并注意： 不要指望在float元素下使用text-align因?yàn)閒loat會(huì)默認(rèn)的讓元素的
display變成block或者是table（float會(huì)將display：inline-table變成display:table）
二、float 作用機(jī)制
他有個(gè)著名的圖惡性达椰，讓父元素的高度塌陷翰蠢，大多數(shù)的場(chǎng)景下會(huì)影響正常的布局，但是要注意啰劲，這個(gè)讓父元素塌陷不是缺點(diǎn)梁沧，不是bug，這個(gè)只是為了實(shí)現(xiàn)文字環(huán)繞效果才出來(lái)的蝇裤，但是在今天的布局里是不需要float塌陷的廷支，也因?yàn)檫@個(gè)特性可能會(huì)出現(xiàn)一些不一樣的效果。
元素高度塌陷只是一個(gè)效果栓辜，還有另一個(gè)效果是‘<u>行框盒子和浮動(dòng)元素的不可重疊性</u>’
<style>
.point01 .father{
width: 400px;
}
.point01 .floatleft{
float: left;
}
.point01 .father img{
width: 180px;
}
.point01 .father .div{
width: 180px;
height: 30px;
background: #ccc;
}
</style>
<div class="point01">
<div class="father"><img src="./img/test.png" alt="" class="floatleft">我是文字恋拍，雖然我的兄弟元素img 已經(jīng)float了，但是他并不會(huì)蓋在我的上邊藕甩，我繞著他走的</div>
<div class="father"><img src="./img/test.png" alt="" class="floatleft"><div class="div">那如果我在block元素里邊了呢施敢？額···</div></div>
</div>
<style>
.point02{
display: block;
}
.point02 .father {
width: 200px;
height: 64px;
border: 1px solid #ccc;
}
.point02 .floatleft {
float: left;
}
.point02 .father img {
width: 60px;
height:64px;
}
.point02 .father .div {
width: 180px;
height: 30px;
background: #ccc;
}
</style>
<div class="point02">
<div class="father">
<div class="floatleft"><img src="./img/test.png" alt=""></div>
框框的高度和圖片的高度一樣高，由于一些額外的原因狭莱，vertical-align等的原因僵娃，圖片的高度高粗框框一丟丟，同時(shí)因?yàn)椴桓采w原則贩毕，所以有一行空行是被環(huán)繞的</div>
</div>
所以悯许，一般來(lái)說(shuō)我們需要用一些干凈的手段來(lái)清除浮動(dòng)的影響；
三辉阶、 float更深入的作用機(jī)制
-
浮動(dòng)錨點(diǎn)：
float本身是流中的一個(gè)點(diǎn)先壕，這個(gè)點(diǎn)本身并不浮動(dòng)瘩扼，表現(xiàn)起來(lái)更像是一個(gè)沒(méi)有marginborderpadding的空內(nèi)聯(lián)元素 - 浮動(dòng)參考：浮動(dòng)元素對(duì)齊的參考的實(shí)體
<style>
.point03 {
display: block;
}
.point03 .father {
width: 200px;
}
.father .more{
float: left;
background: #ccc;
}
</style>
<div class="point03">
<div class="father">
<h3>我是一個(gè)非常長(zhǎng)的,長(zhǎng)到能夠換行的標(biāo)題元素，然后我們看看更多這個(gè)按鈕在哪呢垃僚？理論上他是應(yīng)該在我的后頭頭追加的<a class="more" href="#">更多</a></h3>
</div>
</div>
float與流體布局
除了目錄樹集绰，還有三欄布局如圖：
<style>
.prev{
float: left;
}
.next{
float: right;
}
.title{
margin: 0 70px;
text-align: center;
}
</style>
<div class="box">
<a class="prev">« 上一張</a>
<a class="next">下一章»</a>
<h3 class="title">第十二章，this is test </h3>
</div>
四谆棺、float的天然克星 clear
Clear：元素盒子的邊栽燕，不能和前面的浮動(dòng)元素相鄰
clear的值是這樣的：
-
none:浮動(dòng)就浮動(dòng)，我也沒(méi)辦法 -
left：左側(cè)不能浮動(dòng) -
right: 右側(cè)不能浮動(dòng) -
both: 兩邊都不能浮動(dòng)
left和both沒(méi)什么卵用改淑， 直接clear:both就好了
<style>
.point04{
display: block;
margin: 100px;
height: 100px;
}
.point04 li {
/* display: block; */
list-style-type: none;
width: 30px;
height: 30px;
margin: 5px;
float: left;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
}
.point04 li:nth-of-type(3) {
clear: both;
}
</style>
<div class="point04">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
clear的弊端：
clear只有在塊級(jí)元素才是有效的碍岔，但是::after等為元素默認(rèn)是內(nèi)聯(lián)等，所以借用::after的時(shí)候朵夏，需要設(shè)置display:block;
.clear::after {
content: "";
display: block;
clear: both;
}
<style>
.point04 {
}
.point04 .father {
/* display: block; */
display: block;
margin: 100px;
height: 100px;
width: 300px;
border: 1px solid #ccc;
}
.point04 .father::after{
contain: "";
display: block;
clear: both;
}
.point04 .father img{
height: 100px;
float: left;
}
</style>
<div class="point04">
<div class="father"><img src="./img/test02.jpeg" alt="" sr=""><!-- -->
<div class="font">我理論上應(yīng)該在右邊怪怪的呆著蔼啦，但是旁邊突然出現(xiàn)了一個(gè)clear，<div style="clear:both"></div><這時(shí)候起我的其他文字就被擠下去了仰猖，其實(shí)換行后并沒(méi)有真正的清楚浮動(dòng)捏肢，只是換行了而已</div>
</div>
</div>
使用了clear有一些特性依然存在，就比如：
- 如果
clear:both元素前邊就是float那么饥侵，margin-top負(fù)值即使是-9999px也不會(huì)有任何的作用 -
clear:both后邊的元素依舊可能會(huì)發(fā)生文字環(huán)繞的現(xiàn)象
有時(shí)候父元素設(shè)置了clear:both組織浮動(dòng)對(duì)其他元素的影響鸵赫，但是最后錯(cuò)位依然還是有的，（就比如上圖）
所以為了徹底清楚浮動(dòng)躏升，我們建議用BFC
