【LemonCK】CSS盒子塌陷问题

什么是盒子塌陷 ?
理论上在父元素内部的元素 出现在盒子外部

出现原因?
父盒子的空间有限,无法容纳浮动的儿子,导致儿子离家出走。(O(∩_∩)O哈哈~)
当父元素未设置(足够)高度的时候,子元素设置了浮动的属性时,子元素就会跳出父元素的边界(脱离文档流)。
( 当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是CSS高度塌陷。 )

( 如图:子元素设置浮动 导致父元素塌陷 )

解决方法:

1. 要给没有设置高度的父元素设置 overfloat:hidden;

overflow:auto; 有可能出现滚动条,影响美观。

overflow:hidden; 可能会带来内容不可见的问题。

2. 在外部盒子内最下方添上带clear属性的空盒子

( 设置 clear:both; )用最下面的空盒子清除浮动,把盒子重新撑起来

<div style="clear:both;"></div>

并不推荐 引入了不必要的冗余元素

3.设置 after 伪类清除浮动(外部盒子的after伪元素设置clear属性。)

.father:after{
                clear: both;
                content: "";
                width: 0;
                height: 0;
                display: block;
                visibility: hidden;
}

4.将盒子大小写死,给每个盒子设定固定的width和height,直到合适为止(缺点是非自适应,浏览器的窗口大小直接影响用户体验)

5.给外部的父盒子也添加浮动,让其也脱离标准文档流(但可能会影响页面的布局)

作者:Nobita Chen

-----------------------------------------------

慢慢的,你总会发现,你的努力没有白费。

posted @ 2020-10-04 18:09  charseki  阅读(308)  评论(0编辑  收藏  举报