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

Question

父元素中的所有子元素如果设置float属性,那么父元素的高度会坍缩为0,这个问题怎么解决?目前知道的方法是设置父元素也浮动,或者设一个空的子div,然后style"clear:both",或者设置父元素的高度,但是这些都感觉有一些...

PHP中文网 · Answer

这里有两篇文章你可以看看，一篇是讲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

一个有四个方法可以解决:

方案一

在浮动元素下面加一个清除浮动的元素:p{clear:both}

html


    
p 1
    p 2


css
.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}
方案二
将父元素也设置为浮动的
html

    
p 1
    p 2

方案三
为父元素显式的设置高度，不推荐
html

    
p 1
    p 2        

方案四
为父元素加入overflow:hidded属性或者overflow:auto属性
html

    
p 1
    p 2        

上面四种方案，方案一比较靠谱，兼容性最强

PHPz · Answer

伪元素设置{content:"";display:table;}
空p设置 {clear:both}
和父元素： {overflow:auto}
我只知道这几个。

至于你的overflow:hidden; 是你写错了啊？

PHPz · Answer

overflow hidden是超出的内容隐藏掉
我常用的就是你说的clear both 没什么问题啊
或者你高兴的话直接把父节点也float起来也能解决但是不建议这么做这样会导致全部元素都浮动了容易出更多问题

PHP中文网 · Answer

只知道三种。好像没什么原因吧。记住就好

ringa_lee · Answer

还是clearfix大法最好

黄舟 · Answer

Clear Float总结得不错，应该能解答你的疑惑。

高洛峰 · Answer

大家说得都是对的，我来补充一下，基本所有css框架都有一个类叫clearfix，只需要在这个float的p上加上这个类名就可以了。

PHP中文网 · Answer

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

在css里面加上这两行代码，给浮动元素的父级加上clearfix这个class就行了（元素加浮动，父级清除浮动）

巴扎黑 · Answer

方法网上都有可以自己慢慢试真的！还是自己通过尝试来看区别比较直观！比如用给父元素加高度的方法，再去试试给浮动元素用margin是否和正常文档流一样！反正个人觉得还是给父元素加after伪类比较顺！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

方案一

方案二

方案三

方案四