整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們知道css中最重要的就是浮動了，一張網頁結構布局，用的最多的就是浮動了，現在大多數的網站網頁結構都是浮動布局了，不像早些年的表格布局。所以學好浮動對我們的開發很重要。
浮動是什么？可能很多人的理解都不一樣，我們來看看w3c對浮動的解釋是什么
大多數小伙伴聽得最多的可能就是浮動流，下面我們就來講講什么是浮動流以及清除浮動。
首先，我們知道，在一張網頁中的正常布局流向（排列方式）都是從左到右，從上到下的方式排列。這個我們稱之為標準文檔流。那什么是浮動流呢？
浮動浮動浮動==> 因為有個浮字，我們可以理解為浮起來了一樣。就好比標準文檔流在地下排流，浮動流在天空上排流。簡單看個例子。
這是兩個正常排列的div，div獨占一行，就不用多說了吧。然后我們給小的方塊加一個浮動
然后我們再看效果
然后我們就看到大方塊在小方塊下面，因為小方塊跑天上去了，它就不占據原來的位置，會把那個位置空出來，所以大方塊會竄上去，就看起來兩個方塊重疊了。
在看另外一個例子，子級浮動，父級高度撐不開的問題，這也是浮動帶來的一個不好的影響，平常寫代碼的時候會經常遇到這個。
一個ul標簽，下面兩個li標簽，然后給ul加一個邊框 便于觀看。
保存運行看下正常效果
然后我們給li標簽浮動
效果如下
這下我們看到ul的高度沒有了，上下邊框緊緊挨著，這就是剛剛上面說的浮起來的狀況，因為子級li標簽浮動起來了，它不占據原來的位置，它已經在天上了，所以它的父級ul標簽包不住它，撐不起來高度，才會產生這種狀況。
那我們要怎么解決這種現象呢。就是清除浮動。
大致分為4種方案：
1、在并列的子元素，最后加一個元素，給他加clear：both
2、給父子加一個class： clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
3、讓父級觸發BFC效果
position:absolute
display:inline-block
float：left|right
overflow：hidden
4、如何浮動的父級本身就是浮動元素嗎，那么不用清除浮動了
咱們就來給父級觸發BFC效果看一下。
看效果
現在父級就把子級包裹住了，高度也有了。
有什么問題可以點一下關注，私信小編。
五節頁面布局-浮動。
這一節說一下頁面布局浮動。浮動的屬性是float，它的只有 left，向左浮動，向右浮動。還有 no，就是不浮動，就是不給它這個屬性，也是no。然后css是繼承元素的浮動元素是什么？還有 clear 屬性，就是清除元素周圍的浮動。看一下代碼，上一節的這些屬性都刪一下，刷新一下。
現在是有兩div，就是兩個div，一個是第三頁網頁，一個是第四個玩意，浮動屬性。第一個div，向左浮動。第二個div，給它一個float right，向右浮動。看一下效果，這邊都給了寬，都是300p 叉，然后刷新。刷新，沒有保存，保存一下。
刷新，你看，我的第三個網頁在左邊，第四個網頁在右邊，它就是 float。左邊float 右邊，跟兩個紙箱子是一樣的。它的盒子模型，一個盒子在左邊，一個盒子在右邊，給它寬大一點。就比如說，我這盒子很大，六百劈叉，你看，它就跟地面似的。第一層只能乘乘六百，乘不了兩個就會在第二層出現。
再給乘三百，然后都 float left，看一下刷新。看，它就并排的都朝著左邊，然后這樣一個一個地放，就跟碼快遞箱子一樣，可以這樣。
可想，再看一下 clear，屬性 clear 屬性，就是清除浮動元素。給它第二個div，給它一個 clear left，就是它左邊的浮動清除掉。看一下效果，保存，保存之后刷新一下，看，它就沒有了浮動效果。浮動看著很簡單，但是用的時候還是挺多的，尤其是布局的時候。好了，就這樣，拜拜。感謝觀看。
使用css布局當中，經常會用到使用浮動布局，但是浮動之后元素就會產生脫離文檔流而浮動在頁面上，導致父親節點感應不到頁面的高度產生高度坍塌而讓后續的子節點被浮動的節點遮蓋，這時就需要使用清除浮動讓節點感應到浮動節點的高度方便布局。
在清除浮動中可以使用一下發放實現清除浮動
在清除浮動中常用的就是使用clear:both清除兩邊的浮動效果。這個可以使用增加div節點的方式實現。
也可是使用bootstrap使用的清除浮動的方式，使用after和before的偽類來實現清除浮動
清除浮動主要的目的就是讓父親節點感應到浮動子節點的高度，可以使用overflow：hidden來讓父親節點感應到子節點高度，當然這樣的使用方法會讓本來要不使用此屬性的節點產生超出部分隱藏，這個需要注意。
bootstrap使用的清除浮動less
在實現浮動中，如果一個節點浮動，另外一個節點不浮動，那么沒有浮動的節點中的內容使用bootstap清除浮動，感應到的就是浮動節點的高度導致產生不必要的麻煩。
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;
}
菜單浮動其他不浮動導致的bug
在沒有浮動的節點中清楚浮動
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
