html父属性,【前端】html中使用float属性,父元素高度会变为0,怎么解决?

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

回答

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

还有就是BFC里面有两条规则:

1、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

2、计算BFC的高度时，浮动元素也参与计算

overflow:hidden会产生BFC，所以内部的子元素不会影响到父元素，所以高度不会塌陷。

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

方案一

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

html

Div 1

Div 2

css

.clearfix:after {

content: " ";

display: block;

height: 0;

clear: both;

}

方案二

将父元素也设置为浮动的

html

Div 1

Div 2

方案三

为父元素显式的设置高度，不推荐

html

Div 1

Div 2

方案四

为父元素加入overflow:hidded属性或者overflow:auto属性

html

Div 1

Div 2

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

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

伪元素设置{content:””;display:table;}

空div设置 {clear:both}

和父元素： {overflow:auto}

我只知道这几个。

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

overflow hidden是超出的内容隐藏掉

我常用的就是你说的clear both 没什么问题啊

或者你高兴的话 直接把父节点也float起来 也能解决 但是不建议这么做 这样会导致全部元素都浮动了 容易出更多问题

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

还是clearfix大法最好

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

.clearfix:after{ clear:both; display:block; content:””;}

.clearfix{ zoom:1;}

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

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