css - html中使用float属性,父元素高度会变为0,怎么解决?

Question

父元素中的所有子元素如果设置float属性,那么父元素的高度会坍缩为0,这个问题怎么解决?目前知道的方法是设置父元素也浮动,或者设一个空的子p,然后style"clear:both",或者设置父元素的高度,但是这些都感觉有一些局限性,还有一个方法是父元素设置overflow:hidden;请问各位为什么这个方法可以解决问题,多余的内容隐藏跟父元素高度显示有什么关系吗?另外还有其他的方法吗?

Answer 1

這裡有兩篇文章你可以看看，一篇是講overflow:hidden包裹性來清除浮動，一篇是關於BFC的。
http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE% E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/
根據張鑫旭老師的說法，就是overflow:hidden和position：absolute會有包裹性，這樣就會包裹著浮動的元素，就是清除浮動了，當然我沒有試過absolute能不能清除浮動。

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
還有就是BFC裡面有兩條規則:
1、BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
2、計算BFC的高度時，浮動元素也參與計算
overflow:hidden會產生BFC，所以內部的子元素不會影響到父元素，所以高度不會塌陷。

Answer 2

一個有四個方法可以解決:

方案一

在浮動元素下方加上一個清除浮動的元素:p{clear:both}

html

<p class="clearfix">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>
</p

css

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

方案二

將父元素也設定為浮動的

html

<p style="float: left;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>
</p>

方案三

為父元素明確的設定高度，不建議

html

<p style="height: 400px;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>        
</p>

方案四

為父元素加入overflow:hidded屬性或overflow:auto屬性

html

<p style="overflow: hidden;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>        
</p>

上面四種方案，方案一比較可靠，相容性最強

Answer 3

偽元素設定{content:"";display:table;}
空p設定 {clear:both}
和父元素： {overflow:auto}
我只知道這幾個。

至於你的overflow:hidden; 是你寫錯了啊？

Answer 4

overflow hidden是超出的內容隱藏掉
我常用的就是你說的clear both 沒什麼問題啊
或者你高興的話直接把父節點也float起來也能解決但是不建議這麼做會導致全部元素都浮動了容易出更多問題

Answer 5

只知道三種。好像沒什麼原因吧。記住就好

Answer 6

還是clearfix大法最好

Answer 7

Clear Float總結得不錯，應該能解答你的疑惑。

Answer 8

大家說得都是對的， 我來補充一下， 基本所有css框架都有一個類別叫clearfix， 只需要在這個float的p上加上這個類名就可以了。

Answer 9

.clearfix:after{ clear:both; display:block; content:"";}
.clearfix{ zoom:1;}

在css裡面加上這兩行程式碼，給浮動元素的父級加上clearfix這個class就行了（元素加浮動，父級清除浮動）

Answer 10

方法網路上都有可以自己慢慢試真的！還是自己透過嘗試來看差異比較直觀！例如用給父元素加高度的方法，再去試試給浮動元素用margin是否和正常文檔流一樣！反正個人覺得還是給父元素加after偽類比較順！