body 没有被撑开_父元素没有被撑开塌陷问题解决方案
在布局中，有可能会出现这样的现象，就是子元素没有把父元素撑开，父元素出现塌陷现象，这个问题基本上都是由没有清除浮动造成的，网上的分析还是海量的，不过这里还是再做一下简单介绍，希望能够给需要的朋友带来一定的帮助。
代码如下:[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落
#box{
width:400px;
border:5px solid red;
}
#left{
width:100px;
height:50px;
background:blue;
float:left
}
#right{
width:100px;
height:50px;
background:#609;
float:right
}
从上面的代码表现可以看出父元素出现了塌陷现象，就是因为子元素采用了浮动，但是没有清除。
解决方案如下:[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落
#box{
width:400px;
border:5px solid red;
overflow:hidden;
}
#left{
width:100px;
height:50px;
background:blue;
float:left
}
#right{
width:100px;
height:50px;
background:#609;
float:right
}
在父元素上添加了overflow:hidden实现了清除浮动的效果，当然清除浮动方式有很多中。
更多相关内容可以参阅css清除浮动的方式汇总一章节。
body 没有被撑开_父元素没有被撑开塌陷问题解决方案相关推荐
- body 没有被撑开_父div没有被撑开，该怎么解决？_html/css_WEB-ITnose
上面的例子中,保留div1的height:100%的前提下,能够让div2撑开div1吗? 回复讨论(解决方案) 默认情况下就是撑开的 height:100%;不要或者设为 height:auto, ...
- CSS：当子元素皆浮动，撑开父元素的3种方式
1. 在子元素后面补充同级的空元素,并定义清除浮动样式 html文件 <main><div><span>肥水东流无尽期.当初不合种相思.梦中未比丹青见,暗里忽惊山鸟 ...
- css高度自适应-父元素随子元素变化
Day16 1. min-height IE6不兼容问题 正常项目中:最小高度直接用min-height即可. 如果考虑兼容:min-height IE6不兼容.IE6默认把height解析成最小高度 ...
- 父元素设置overflow: overlay； 或 overflow: scroll； 或 overflow: auto； 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
- HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- [css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法 父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
- html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 父元素设置min-height，子元素height 100%失效问题
问题描述 当父元素设置了min-height后,子元素设置height为100%,发现子元素的height 100%失效,即无法根据父级的高度自适应,而是根据自身内部元素撑开高度,若子元素设置了确定的 ...
- 【CSS篇】父元素设置min-height，子元素height 100%失效问题
问题描述 当父元素设置了min-height后,子元素设置height为100%,发现子元素的height 100%失效,即无法根据父级的高度自适应,而是根据自身内部元素撑开高度,若子元素设置了确定的 ...
最新文章
- windows下 nginx安装 使用
- C# 函数参数object sender, EventArgs e
- junit链接mysql_java – 使用JUnit进行简单的JDBC连接测试
- windows tomcat 升级openssl_Linunx开发环境配置——Tomcat
- 【单调栈】向右看齐（luogu 2947）
- 高级SmartGWT教程，第1部分
- CCIE学习（40）—— OSPF设计与LSA类型（三）
- Illustrator 教程，如何在 Illustrator 中创建色板？
- YUI3 Overlay的使用
- obs摄像头模糊_OBS录制视频画面很糊，不清晰，怎么调整设置？
- 如何判断一个三位数是否为水仙花数
- 《图书管理系统》需求分析
- pt100铂电阻低温温度传感器的特点
- 在linux开发板上显示图片,制作开发板的logo标签
- Elasticsearch：从写入原理谈写入优化
- 无线电视服务器主机名,电视服务器主机名怎么填
- 【JDBC】JPA和JDBC的区别
- Vue UI组件库(Element UI库)
- 装机不求人，10 分钟电脑配置挑选速成攻略
- RedHat/CentOS8【OpenSSL】制作自签证书和 HTTPS 配置