整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
我們知道css中最重要的就是浮動(dòng)了，一張網(wǎng)頁結(jié)構(gòu)布局，用的最多的就是浮動(dòng)了，現(xiàn)在大多數(shù)的網(wǎng)站網(wǎng)頁結(jié)構(gòu)都是浮動(dòng)布局了，不像早些年的表格布局。所以學(xué)好浮動(dòng)對(duì)我們的開發(fā)很重要。
浮動(dòng)是什么？可能很多人的理解都不一樣，我們來看看w3c對(duì)浮動(dòng)的解釋是什么
大多數(shù)小伙伴聽得最多的可能就是浮動(dòng)流，下面我們就來講講什么是浮動(dòng)流以及清除浮動(dòng)。
首先，我們知道，在一張網(wǎng)頁中的正常布局流向（排列方式）都是從左到右，從上到下的方式排列。這個(gè)我們稱之為標(biāo)準(zhǔn)文檔流。那什么是浮動(dòng)流呢？
浮動(dòng)浮動(dòng)浮動(dòng)==> 因?yàn)橛袀€(gè)浮字，我們可以理解為浮起來了一樣。就好比標(biāo)準(zhǔn)文檔流在地下排流，浮動(dòng)流在天空上排流。簡(jiǎn)單看個(gè)例子。
這是兩個(gè)正常排列的div，div獨(dú)占一行，就不用多說了吧。然后我們給小的方塊加一個(gè)浮動(dòng)
然后我們?cè)倏葱Ч?/p>
然后我們就看到大方塊在小方塊下面，因?yàn)樾》綁K跑天上去了，它就不占據(jù)原來的位置，會(huì)把那個(gè)位置空出來，所以大方塊會(huì)竄上去，就看起來兩個(gè)方塊重疊了。
在看另外一個(gè)例子，子級(jí)浮動(dòng)，父級(jí)高度撐不開的問題，這也是浮動(dòng)帶來的一個(gè)不好的影響，平常寫代碼的時(shí)候會(huì)經(jīng)常遇到這個(gè)。
一個(gè)ul標(biāo)簽，下面兩個(gè)li標(biāo)簽，然后給ul加一個(gè)邊框 便于觀看。
保存運(yùn)行看下正常效果
然后我們給li標(biāo)簽浮動(dòng)
效果如下
這下我們看到ul的高度沒有了，上下邊框緊緊挨著，這就是剛剛上面說的浮起來的狀況，因?yàn)樽蛹?jí)li標(biāo)簽浮動(dòng)起來了，它不占據(jù)原來的位置，它已經(jīng)在天上了，所以它的父級(jí)ul標(biāo)簽包不住它，撐不起來高度，才會(huì)產(chǎn)生這種狀況。
那我們要怎么解決這種現(xiàn)象呢。就是清除浮動(dòng)。
大致分為4種方案：
1、在并列的子元素，最后加一個(gè)元素，給他加clear：both
2、給父子加一個(gè)class： clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
3、讓父級(jí)觸發(fā)BFC效果
position:absolute
display:inline-block
float：left|right
overflow：hidden
4、如何浮動(dòng)的父級(jí)本身就是浮動(dòng)元素嗎，那么不用清除浮動(dòng)了
咱們就來給父級(jí)觸發(fā)BFC效果看一下。
看效果
現(xiàn)在父級(jí)就把子級(jí)包裹住了，高度也有了。
有什么問題可以點(diǎn)一下關(guān)注，私信小編。
五節(jié)頁面布局-浮動(dòng)。
這一節(jié)說一下頁面布局浮動(dòng)。浮動(dòng)的屬性是float，它的只有 left，向左浮動(dòng)，向右浮動(dòng)。還有 no，就是不浮動(dòng)，就是不給它這個(gè)屬性，也是no。然后css是繼承元素的浮動(dòng)元素是什么？還有 clear 屬性，就是清除元素周圍的浮動(dòng)。看一下代碼，上一節(jié)的這些屬性都刪一下，刷新一下。
現(xiàn)在是有兩div，就是兩個(gè)div，一個(gè)是第三頁網(wǎng)頁，一個(gè)是第四個(gè)玩意，浮動(dòng)屬性。第一個(gè)div，向左浮動(dòng)。第二個(gè)div，給它一個(gè)float right，向右浮動(dòng)。看一下效果，這邊都給了寬，都是300p 叉，然后刷新。刷新，沒有保存，保存一下。
刷新，你看，我的第三個(gè)網(wǎng)頁在左邊，第四個(gè)網(wǎng)頁在右邊，它就是 float。左邊f(xié)loat 右邊，跟兩個(gè)紙箱子是一樣的。它的盒子模型，一個(gè)盒子在左邊，一個(gè)盒子在右邊，給它寬大一點(diǎn)。就比如說，我這盒子很大，六百劈叉，你看，它就跟地面似的。第一層只能乘乘六百，乘不了兩個(gè)就會(huì)在第二層出現(xiàn)。
再給乘三百，然后都 float left，看一下刷新。看，它就并排的都朝著左邊，然后這樣一個(gè)一個(gè)地放，就跟碼快遞箱子一樣，可以這樣。
可想，再看一下 clear，屬性 clear 屬性，就是清除浮動(dòng)元素。給它第二個(gè)div，給它一個(gè) clear left，就是它左邊的浮動(dòng)清除掉。看一下效果，保存，保存之后刷新一下，看，它就沒有了浮動(dòng)效果。浮動(dòng)看著很簡(jiǎn)單，但是用的時(shí)候還是挺多的，尤其是布局的時(shí)候。好了，就這樣，拜拜。感謝觀看。
使用css布局當(dāng)中，經(jīng)常會(huì)用到使用浮動(dòng)布局，但是浮動(dòng)之后元素就會(huì)產(chǎn)生脫離文檔流而浮動(dòng)在頁面上，導(dǎo)致父親節(jié)點(diǎn)感應(yīng)不到頁面的高度產(chǎn)生高度坍塌而讓后續(xù)的子節(jié)點(diǎn)被浮動(dòng)的節(jié)點(diǎn)遮蓋，這時(shí)就需要使用清除浮動(dòng)讓節(jié)點(diǎn)感應(yīng)到浮動(dòng)節(jié)點(diǎn)的高度方便布局。
在清除浮動(dòng)中可以使用一下發(fā)放實(shí)現(xiàn)清除浮動(dòng)
在清除浮動(dòng)中常用的就是使用clear:both清除兩邊的浮動(dòng)效果。這個(gè)可以使用增加div節(jié)點(diǎn)的方式實(shí)現(xiàn)。
也可是使用bootstrap使用的清除浮動(dòng)的方式，使用after和before的偽類來實(shí)現(xiàn)清除浮動(dòng)
清除浮動(dòng)主要的目的就是讓父親節(jié)點(diǎn)感應(yīng)到浮動(dòng)子節(jié)點(diǎn)的高度，可以使用overflow：hidden來讓父親節(jié)點(diǎn)感應(yīng)到子節(jié)點(diǎn)高度，當(dāng)然這樣的使用方法會(huì)讓本來要不使用此屬性的節(jié)點(diǎn)產(chǎn)生超出部分隱藏，這個(gè)需要注意。
bootstrap使用的清除浮動(dòng)less
在實(shí)現(xiàn)浮動(dòng)中，如果一個(gè)節(jié)點(diǎn)浮動(dòng)，另外一個(gè)節(jié)點(diǎn)不浮動(dòng)，那么沒有浮動(dòng)的節(jié)點(diǎn)中的內(nèi)容使用bootstap清除浮動(dòng)，感應(yīng)到的就是浮動(dòng)節(jié)點(diǎn)的高度導(dǎo)致產(chǎn)生不必要的麻煩。
css代碼：
.clearfix:after{
content: " ";
display: table;
}
.clearfix:bofore{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
#nav{
float: left;
width: 100px;
height:300px;
background-color: red;
position: relative;
}
.content{
height: 600px;
margin-left: 100px;
background-color: green;
}
.inner{
background-color: #fff;
color: #ff4500;
}
.inner p{
box-sizing: boder-box;
-webkit-box-sizing: border-box;
width: 50%;
text-align: center;
float: left;
background-color: #cecece;
padding: 10px 0;
}
.last{
border-left: 1px solid #dcdcdc;
}
菜單浮動(dòng)其他不浮動(dòng)導(dǎo)致的bug
在沒有浮動(dòng)的節(jié)點(diǎn)中清楚浮動(dòng)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
