一天搞定CSS： 浮动（float）及文档流--10
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS： 浮动（float）及文档流--10
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地布局； 恨，浮動之后遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。
下面我們就來詳細說明浮動！！！！！！！！
1.文檔流
在浮動中有一個文檔流的概念，所以在這里不得不介紹一下文檔流了。
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--文檔流文檔中可顯示的元素在排列時候的開始位置以及他們所占的區(qū)域因為頁面中的元素分為不同的種類，所以他們會按各自的特點去顯示，在頁面中所占的區(qū)域不是一樣的。會按從上到下，從左到右的順序輸出內容--><!--<span style="background: red;">kaivon</span><span style="background: red;">kaivon2</span>--><!--<span style="background: red;">kaivon</span><div style="width: 100px;height: 100px; background: red;">kaivon2</div>--><!--<span style="background: red;">kaivon</span><div style="width: 100px;height: 100px; background: red; display: inline-block;">kaivon2</div>--><div style="width: 100px;height: 100px; background: red; ">kaivon1</div><div style="width: 100px;height: 100px; background: green;">kaivon2</div></body> </html>2.浮動
浮動：
使元素脫離文檔流，按照指定的方向發(fā)生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來
浮動的目的：
為了達到自己的布局目的，讓指定元素定位在指定位置，我們就需要用到浮動。
3.概述浮動float
通過控制屬性float來，控制元素的位置
float取值：
1）left：向左浮動2）right：向右浮動3）none：沒有浮動，默認值4.浮動的特點
5.代碼演示
1）.特點1234演示
1、塊元素可以在一行顯示
2、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來
3、行內元素支持寬高
4、脫離文檔流
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 200px;background: green;color: #fff;float: left;}span{background: red;width: 100px;height: 200px;float: right;}.father{float: none;border: 1px solid blue;margin: 100px;background:none;width: 100%;height: 500px;}a{float: right;width: 100px;height: 100px;background: yellow;}</style></head><body><!--浮動 float定義 使元素脫離文檔流，按照指定的方向發(fā)生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來值 left、right、none特征1、塊元素可以在一行顯示2、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來3、行內元素支持寬高4、脫離文檔流--><!--2、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來 最外層的div.father就是一個父容器--><div class="father"><!--1、塊元素可以在一行顯示--><div>div1</div><div style="background: red;">div2</div><!--3、行內元素支持寬高 a, span標簽并沒有做類型轉變，那它是一個行內標簽，是不能設置寬高的，但是這里可以了--><span>span1</span><a href="">a22222</a></div><!--4、脫離文檔流 此時所有.father下的所有div，span，a標簽都不是按正常的文檔流循序排列了，說明脫離了文檔流--></body> </html>2）.特點56演示
5、塊元素默認寬度會被改變（包裹性）
6、父級高度塌陷（破壞性）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;}.box{width: 100px;height: 200px;background: green;color: #fff;float: left;}.width{height: 50px;border: 5px solid #0000FF;float: left;}</style></head><body><!--浮動 float定義 使元素脫離文檔流，按照指定的方向發(fā)生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來值 left、right、none特征1、塊元素可以在一行顯示2、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來3、行內元素支持寬高4、脫離文檔流浮動后跟的元素（沒有浮動）的位置是從前面浮動元素的位置開始的注意：非浮動元素里的內容會留出前面浮動元素的位置(盒模型的位置)5、塊元素默認寬度會被改變（包裹性）塊元素不設置寬度，那寬度會自動變成內容所撐開的寬度6、父級高度塌陷（破壞性）子元素有浮云后，那父級元素的高度不會自動撐開了--><!--5、塊元素默認寬度會被改變（包裹性） 正常情況下div會默認占據一行，浮動后寬高就由內容撐開--><div class="width">alibaba</div><!--6、父級高度塌陷（破壞性）--><div class="parent"><div class="box">box</div></div></body> </html>3）.特點7演示
7、換行不會被解析成空格
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;}.box{width: 100px;height: 200px;background: green;color: #fff;float: left;}</style></head><body><!--浮動 float定義 使元素脫離文檔流，按照指定的方向發(fā)生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來值 left、right、none特征1、塊元素可以在一行顯示2、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來3、行內元素支持寬高4、脫離文檔流浮動后跟的元素（沒有浮動）的位置是從前面浮動元素的位置開始的注意：非浮動元素里的內容會留出前面浮動元素的位置(盒模型的位置)5、塊元素默認寬度會被改變（包裹性）塊元素不設置寬度，那寬度會自動變成內容所撐開的寬度6、父級高度塌陷（破壞性）子元素有浮云后，那父級元素的高度不會自動撐開了7、換行不會被解析成空格浮云后的元素就會脫離文檔流了，那它就不屬于文檔流里的結構了，所以換行、空格都跟父級沒關系了--><!--7、換行不會被解析成空格--><div class="parent"><div class="box">box</div><div class="box">box</div><div class="box">box</div></div></body> </html>6.浮動的副作用
地址：http://blog.csdn.net/baidu_37107022/article/details/71554283
7.清除浮動
地址：http://blog.csdn.net/baidu_37107022/article/details/71557806
總結
以上是生活随笔為你收集整理的一天搞定CSS： 浮动（float）及文档流--10的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定HTML----标签的嵌套规则0
- 下一篇： 一天搞定CSS： 浮动（float）与i