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

来源：动视网责编：小采时间：2020-11-27 15:57:03

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

求解html与css的相关问题，附上代码_html/css_WEB-ITnose:问题：这是一个页面布局，现在的问题是，如果我把main里的height属性去掉，那么重新运行之后，页面最下方的蓝色背景布局会消失，请问这是什么原因？代码如下： #header{width: 1300px;height: 180px;background-color: red;}

推荐度：

点击下载本文 文档为doc格式

导读求解html与css的相关问题，附上代码_html/css_WEB-ITnose:问题：这是一个页面布局，现在的问题是，如果我把main里的height属性去掉，那么重新运行之后，页面最下方的蓝色背景布局会消失，请问这是什么原因？代码如下： #header{width: 1300px;height: 180px;background-color: red;}

问题：这是一个页面布局，现在的问题是，如果我把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 分数给你咯

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

推荐度：

点击下载本文 文档为doc格式

标签：代码问题的代码

热门焦点

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

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

回复讨论(解决方案)

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

最新推荐

猜你喜欢

热门推荐