如何解决浮动塌陷


8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

如何解决浮动塌陷

啥是浮动塌陷?

浮动(float)的框可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列,文档中的普通流就表现得如同浮动框不存在一样。 如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候,那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流,包围它们的父块中没有内容了,所以“塌陷”了。

解决方法:

1. 使用带clear属性的空元素
在父块中、浮动元素后使用一个空元素,eg:div标签、br标签、hr标签,并在css中赋予clear:both属性即可清除浮动。

给空元素设置clear后,因为它的左右两边不能有任何浮动元素,所以空元素下移到浮动元素下方。而空元素又包含在父块中,相当于把父块撑开了,视觉上起到了父块包含浮动元素的效果

2. 使用CSS的overflow属性

父级元素添加overflow:hidden/overflow:auto的样式一般情况下很适用,但由于overflow是一种样式的属性,(规定当内容溢出元素框时发生的事情),所以使用该样式虽然可以解决高度塌陷的问题,但是有时候可能会影响元素的样式,所以不要作为主要清理浮动方式

3. 给浮动元素的容器添加浮动

给浮动元素的容器(父元素)也添加上浮动属性即可清除浮动,但是这样会使下一个元素受到这个浮动元素的影响,影响整体布局,不推荐使用。

4. 使用CSS的:after伪元素

给浮动元素的父级元素添加样式css【:after】的伪元素(主要样式如下)—– 所谓的万能清楚法

.clearfix:after{
    content: ‘ ‘; —– 可以是看不见的空格“/20”或点“.”
    display: block;
    height: 0;
    clear: both; —– 清除浮动
   }

   .clearfix{

    zoom:1; —– 为了IE6和IE7浏览器

   }

   这类方式叫万能清楚法,只要能给元素添加class类名即可,不会有无用的空标签,也不会修改父级元素的样式,推荐使用

5. 给浮动元素的父级元素添加固定的高度CSS