子div设置float后会导致父div无法自动撑开

Dongjie_Liu 发布于2019-04-23 13:31 / 1932人阅读

摘要：本文是从简书复制的语法可能有些出入想看正版和更多内容请关注简书小贤笔记注文章部分转载彩泉博客园原因内部的因为之后，就丢失了和的样式，所以外部的不会被撑开。

本文是从简书复制的, 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用来清除浮动：

设置样式.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; 也可以

服务器托管 GPU服务器子Div js清空div子元素 html设置div jsp设置div高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1984.html

解决高度塌陷问题

摘要：但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。所谓高度塌陷就是在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致...

zhoutao 2019-04-23 13:11 评论0 收藏0
理解CSS浮动与清除浮动

摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。本文主要探讨两个问题：为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动，并撑开父元素。起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...

刘东 2019-08-30 12:45 评论0 收藏0
html+css 布局篇

摘要：做了后有一些不好的影响。设置值不能正确显示由于浮动导致父级子级之间设置了属性的值不能正确表达。只有左侧设置为，右侧设置，右侧将会占据整个右侧剩余宽度。float 做了float后有一些不好的影响。 1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开如上图中，如果...

caozhijian 2019-04-23 13:22 评论0 收藏0
前端学习笔记（CSS、JS基础篇）

摘要：搜索引擎中有一个爬虫模块，在页面中使用诸如等强调式的标签，有利于，说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的，要先关再开，避免多次触发而混乱。 CSS篇注意：css注释使用/ /，而不是或者//，否则很容易导致不明错误！！！ div padding：内边距。盒子内容与盒子边框的距离设置，相当于给盒子加了厚度，使用此属性后会改...

caikeal 2019-08-19 17:57 评论0 收藏0
前端学习笔记（CSS、JS基础篇）

摘要：搜索引擎中有一个爬虫模块，在页面中使用诸如等强调式的标签，有利于，说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的，要先关再开，避免多次触发而混乱。 CSS篇注意：css注释使用/ /，而不是或者//，否则很容易导致不明错误！！！ div padding：内边距。盒子内容与盒子边框的距离设置，相当于给盒子加了厚度，使用此属性后会改...

xietao3 2019-08-30 12:54 评论0 收藏0