css--浮動

標籤：targe   區塊層級元素   高度   浮動框   html   特性   文字   指南   浮動   

• 為什麼要有浮動/浮動能幹什嗎？

　　浮動最開始出現的直接原因是為了實現文繞圖文字；但是呢？在曆史進程中，浮動也將腳伸到了頁面配置中，成為了頁面配置的一個穩定得分手。

• 浮動是什嗎？

　　浮動是css中一個非常重要的屬性，元素通過設定float屬性值為：left、right,可以使元素向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，從而實現需求；

• 浮動有哪些特性？

1. 破壞性：

　　由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣，這也是我們常說的浮動具有破壞性，即它會致使父元素高度塌陷。

　　破壞性是毒瘤嗎？

　　是的，不信你往下瞧！

　　未浮動時：

　　html代碼如下：

<section>    <div></div></section><footer>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid blanditiis consectetur corporis ducimus ea eaque, eius, facere fugiat impedit itaque nemo perferendis quo rem sint sit suscipit, totam voluptas!</footer>

 

　　css代碼如下：

 * {margin: 0; padding: 0;}  body {padding: 20px;}  section {border:1px solid #ccc;}  div {width: 100px; height: 100px;}  div:nth-of-type(1) {background-color: orange; } footer {border:1px solid #00ff00; margin-top: 10px;}

　　結果如：　

　　

　　未添加浮動時，瀏覽器按照標準流進行渲染，丁是丁，卯是卯，大家一切按照秩序來，一切都很合理！

　　添加float：left時：

　　html代碼如下：

　　

<section>    <div></div>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, perferendis, veritatis! Aliquam aut ea eaque earum est, et, labore laboriosam laborum odio perferendis porro provident, quidem quo rerum sunt unde.</section><footer>     <p></p></footer>

　　css代碼如下：

* {margin: 0; padding: 0;} body {padding: 20px;} section {border:1px solid #ccc;} div {width: 100px; height: 100px;} div:nth-of-type(1) {background-color: orange; float: left; margin-left: 10px;}  footer {border:1px solid #00ff00; margin-top: 10px;}
　p {background-color: #ef0000; width: 100px; height: 100px;}

　　結果如所示：

　

　　我給div標籤加了float：left；（同時也給了10px的左外邊距，由可以看出父元素section高度塌陷，但寬度沒變），section不再包圍浮動元素了，它只包圍非浮動的元素，實現了文字環繞的效果。但是，footer 卻被該死的提了上來，緊挨著前一個區塊層級元素——section。挨著也就罷了，它竟然藏在橘黃色方塊的後面，幹什嗎？猶抱琵琶半遮面啊！這是我們想要的結果嗎？顯然不是，我們希望橘黃色方塊和紅色方塊誰也不礙著誰，大家一起開開心心的見觀眾，現在弄成這個樣子，什麼鬼？

　　套用《css設計指南》中的話，浮動元素位於“文檔流外部”，因而它已經不被包含在標記中的父元素之內了。正因為如此，它對布局可能產生破壞性影響。

　　這裡提出我的一個疑問，為什麼文本會繞開浮動的元素？？？還請道友解惑，謝謝！

　　2.包裹性

　　浮動就是個帶有方位的display:inline-block屬性。在 CSS 中，任何元素都可以浮動。浮動元素會產生一個塊級框，而不論它本身是何種元素。具體地還沒弄清楚，這裡擺上一個連結，大家一起學習。http://www.zhangxinxu.com/wordpress/2010/01/cssfloat%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/。

css--浮動