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

Question

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

Answer 1

Here are two articles you can read, one is about overflow:hidden wrapping property to clear floats, and the other is about 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/
According to teacher Zhang Xinxu, it is overflow:hidden and position: absolute will have wrapping properties, so it will wrap the floating elements, which means clearing the floats. Of course, I have not tried whether absolute can clear the floats.

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
There are two rules in BFC:
1. BFC is a Isolated independent container, the child elements inside the container will not affect the elements outside. And vice versa.
2. When calculating the height of BFC, floating elements also participate in the calculation
overflow:hidden will generate BFC, so the internal child elements will not affect the parent element, so the height will not collapse.

Answer 2

There are four ways to solve it:

Option 1

Add an element that clears the float below the floating element: 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;
}

Option 2

Set the parent element to float as well

html

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

Option 3

Explicitly setting the height of the parent element is not recommended

html

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

Option 4

Add overflow:hidded attribute or overflow:autoattribute

to the parent element

html

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

The above four options, option one is more reliable and has the strongest compatibility

Answer 3

Pseudo element settings {content:"";display:table;}
Empty p settings {clear:both}
and parent elements: {overflow:auto}
I only know these.

As for your overflow:hidden;, did you write it wrong?

Answer 4

Overflow hidden is to hide the excess content
What I usually use is the clear both you mentioned. There is no problem
Or if you are happy, you can also directly float the parent node, but it is not recommended to do so. As a result, all elements are floated and more problems may arise

Answer 5

Only three types are known. There seems to be no reason. Just remember

Answer 6

Clearfix is ​​still the best method

Answer 7

Clear Float summarizes it well and should answer your questions.

Answer 8

Everyone is right. Let me add that basically all CSS frameworks have a class called clearfix. You only need to add this class name to the p of the float.

Answer 9

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

Add these two lines of code to the css, and add the clearfix class to the parent of the floating element (the element is floated, and the parent clears the float)

Answer 10

There are methods online that you can try slowly by yourself! It’s more intuitive to see the difference by trying it yourself! For example, use the method of adding height to the parent element, and then try to use margin for the floating element to see if it is the same as the normal document flow! Anyway, I personally think it is more convenient to add the after pseudo-class to the parent element!