本文是从简书复制的, 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无法自动撑开的更多相关文章

  1. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  2. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  4. 解决子元素设置margin-top,效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  5. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

  6. 为什么子元素设置margin-top会作用在父元素上?

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)

    浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...

  8. 外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法

    原因分析: chorme和firefox浏览器下当缩放窗口大小时,边框的计算宽度变大造成内部div宽度的计算宽度变大,外部div放不下内部div而溢出. 解决办法: 给内部div设置 box-sizi ...

  9. 子Div使用Float后如何撑开父Div

    如果想要撑开父元素可以采用以下方法: 方法一: 父元素设置overflow以及zoom,样式如下: 1 <style> 2   #div1{border:1px solid red;ove ...

随机推荐

  1. TX2 内核编译

    准备工作 版本:jetpack3.1,R28.1,TX2 虚拟机:ubuntu14.04 参考文档.编译工具链.源码下载 编译 主要步骤记载如下: export CROSS_COMPILE=<c ...

  2. win7 64位英文版 ado驱动

    https://www.microsoft.com/zh-tw/download/details.aspx?id=5793

  3. mysql 设置默认时间为now()

    TIMESTAMP的变体1,TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP在创建新记录和修改现有记录的时候都对这个数据列 ...

  4. element-ui多层嵌套表格数据删除

    很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...

  5. Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务

    Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...

  6. node.js修改全局安装文件路径

    在进行 node.js 的开发过程中,我们需要下载大量的依赖模块,为了不让 c 盘的东西太过于散乱,可以通过修改node的配置参数,来修改node依赖的下载路径. 步骤: ①创建两个文件夹:node_ ...

  7. python 实现dns 解析发送接收报文

    http://www.qingruxu.com/code/python/851.html https://tools.ietf.org/html/rfc1035里面的图不一定正确,可以使用抓包软件来进 ...

  8. Python数据类型(字符串)

    文章内容参考了教程:http://www.runoob.com/python/python-basic-syntax.html#commentform Python 字符串 字符串是 Python 中 ...

  9. Servlet用户登录功能实现

    需求:完成用户登录页面校验 第一步:创建一个用户登录的html页面 <!DOCTYPE html> <html> <head> <meta charset=& ...

  10. 万物智联,腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...