如何解决由于float的破坏性导致的塌陷问题?

592 阅读2分钟

如何解决由于float 的破坏性导致的塌陷问题?

浮动有3个特点:

  1. 包裹性
  2. 破坏性
  3. 块级框

今天我们主要来谈论一下浮动的破坏性这一个特点。

浮动的破坏性说白了就是:在一个块级容器(父元素)中且块级元素没有设置高度,如果它的子元素都浮动了,并且没有清除这个浮动,则块级元素(父元素)将会塌陷。

image.png

image.png

如上图所示,如果父元素没有设置高度并且子元素浮动了,则父元素的高度会变成0,造成高度塌陷。

那么如何结局这种由于float 的破坏性导致的塌陷问题?

  1. 在块级容器(父元素)中添加 overflow : hidden 属性
  2. 内墙法(在块级容器结束之前,添加一个空的div标签,给这个空的div设置一个clear:both属性)
  3. 加高法 (给块级元素指定一个height值)

1. 在块级容器(父元素)中添加 overflow : hidden 属性

image.png

image.png overflow:hidden 的作用是用来处理内容溢出情况的,但overflow还有一个特性:可以解决浮动造成的塌陷问题。

在此处overflow的作用是为了清除浮动元素对父元素造成的影响,简称清除浮动。

2. 内墙法

内墙法:在块级容器结束之前,添加一个空的div标签,给这个空的div设置一个clear:both 属性

在浮动元素下面写一个空的div,也就是这个空的div与浮动元素是兄弟元素。

image.png

image.png

 3. 加高法

显式地给块级元素指定一个height值(此方法不推荐)

image.png 由于对于大部分页面来说,一个容器的高度是由其中包含的内容撑起来的,而不是固定死的,所以加高法并不推荐使用