当前位置：Gxlcms > html代码 > 求解html与css的相关问题，附上代码_html/css_WEB-ITnose

求解html与css的相关问题，附上代码_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：28人阅读

问题：这是一个页面布局，现在的问题是，如果我把main里的height属性去掉，那么重新运行之后，页面最下方的蓝色背景布局会消失，请问这是什么原因？
代码如下：

回复讨论(解决方案)

#main{width: 1300px;background-color: green;overflow:hidden;}
在这里加上 overflow:hidden

#footer {
width: 1300px;
clear: both;
height: 180px;
background-color: #00F;
}
加上clear: both;清除float

3楼已经给出正解

float属性会导致该元素，移除正常文档流，即浏览器在绘制其他元素时会当这个元素不存在。
你想啊，如果main里面的元素不存在了，而且main又没有高度会怎样？footer就会上移！

然后浏览器额外绘制float的元素，这样footer就被这两个元素遮挡了！

另外补充：
absolute 和 fixed 定位方式也会导致元素移出正常文档流

3?不太正?
??是 main 尾端要清除float

#main:after{content: "";display: block;float: none !important;clear: both;height: 0;}

为什么在main里面加overflow:hidden;就可以了？我还是不知道原因啊

任何可以触发DIV的hasLayout返回布局流的属性都可以解决这个问题,比如设置它的display :inline-block;

为什么会出现这样的问题，有没有人告诉我？

http://beyondweb.cn/article_detail.php?id=437

懂了，谢谢10楼，slwsss 分数给你咯