如何解决由于float 的破坏性导致的塌陷问题?
浮动有3个特点:
- 包裹性
- 破坏性
- 块级框
今天我们主要来谈论一下浮动的破坏性这一个特点。
浮动的破坏性说白了就是:在一个块级容器(父元素)中且块级元素没有设置高度,如果它的子元素都浮动了,并且没有清除这个浮动,则块级元素(父元素)将会塌陷。
如上图所示,如果父元素没有设置高度并且子元素浮动了,则父元素的高度会变成0,造成高度塌陷。
那么如何结局这种由于float 的破坏性导致的塌陷问题?
- 在块级容器(父元素)中添加 overflow : hidden 属性
- 内墙法(在块级容器结束之前,添加一个空的div标签,给这个空的div设置一个clear:both属性)
- 加高法 (给块级元素指定一个height值)
1. 在块级容器(父元素)中添加 overflow : hidden 属性
overflow:hidden 的作用是用来处理内容溢出情况的,但overflow还有一个特性:可以解决浮动造成的塌陷问题。
在此处overflow的作用是为了清除浮动元素对父元素造成的影响,简称清除浮动。
2. 内墙法
内墙法:在块级容器结束之前,添加一个空的div标签,给这个空的div设置一个clear:both 属性
在浮动元素下面写一个空的div,也就是这个空的div与浮动元素是兄弟元素。
3. 加高法
显式地给块级元素指定一个height值(此方法不推荐)
由于对于大部分页面来说,一个容器的高度是由其中包含的内容撑起来的,而不是固定死的,所以加高法并不推荐使用