子div设置float后会导致父div无法自动撑开
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记
注: 文章部分转载 彩泉 - 博客园
原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
以下是几种解决办法(假设父div的class为“container”):
- 方法1、使用伪类
container::after{
display: block;
height:0;
content: '';
clear: both;
}
container{
display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
- 方法2、不撑开的原理是overflow不可见,所以给父div添加overflow:auto;就行,IE要用_height:1%;
container{
overflow: auto;/*让主要内容区随内容自动撑开*/
overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
_height:1%;/*对IE的hack*/
}
方法3、可以专门最后添加一个子div用来清除浮动:
<div class="clear"></div>
设置样式.clear{clear:both; font-size:0; height:1%;}
方法4、可以设置父div的高度(也就是手动撑开,不灵活);
方法5、直接给父div设置
display: inline-block;
这样也自动撑开方法6、直接给子div设置
display: inline-block;
也能自动撑开,但是排版问题有待研究学习方法7、从网上还发现了一种方法,给父div增加属性:
display:table;
方法8、 子div浮动我就套不住你?OK,我让父div也浮动: 父div设置
float: left;
也可以
子div设置float后会导致父div无法自动撑开的更多相关文章
- 子div设置float后导致父div无法自动撑开的问题
子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...
- 子元素设置margin-top后,父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- 子元素设置margin-top作用到了父元素
子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解
- 为什么子元素设置margin-top会作用在父元素上?
原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)
浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...
- 外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法
原因分析: chorme和firefox浏览器下当缩放窗口大小时,边框的计算宽度变大造成内部div宽度的计算宽度变大,外部div放不下内部div而溢出. 解决办法: 给内部div设置 box-sizi ...
- 子Div使用Float后如何撑开父Div
如果想要撑开父元素可以采用以下方法: 方法一: 父元素设置overflow以及zoom,样式如下: 1 <style> 2 #div1{border:1px solid red;ove ...
随机推荐
- TX2 内核编译
准备工作 版本:jetpack3.1,R28.1,TX2 虚拟机:ubuntu14.04 参考文档.编译工具链.源码下载 编译 主要步骤记载如下: export CROSS_COMPILE=<c ...
- win7 64位英文版 ado驱动
https://www.microsoft.com/zh-tw/download/details.aspx?id=5793
- mysql 设置默认时间为now()
TIMESTAMP的变体1,TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP在创建新记录和修改现有记录的时候都对这个数据列 ...
- element-ui多层嵌套表格数据删除
很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...
- Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务
Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...
- node.js修改全局安装文件路径
在进行 node.js 的开发过程中,我们需要下载大量的依赖模块,为了不让 c 盘的东西太过于散乱,可以通过修改node的配置参数,来修改node依赖的下载路径. 步骤: ①创建两个文件夹:node_ ...
- python 实现dns 解析发送接收报文
http://www.qingruxu.com/code/python/851.html https://tools.ietf.org/html/rfc1035里面的图不一定正确,可以使用抓包软件来进 ...
- Python数据类型(字符串)
文章内容参考了教程:http://www.runoob.com/python/python-basic-syntax.html#commentform Python 字符串 字符串是 Python 中 ...
- Servlet用户登录功能实现
需求:完成用户登录页面校验 第一步:创建一个用户登录的html页面 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 万物智联,腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...