为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
CSS清除浮动使父级元素展开的三个方法
一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开。
为了使父级元素展开，有三种方法：
第一：设置父级元素的高度，但是要事先知道内容的高度，这里内部的元素高度是100像素，加上上下边框高度2像素，一共是102像素。
.content {
height:102
height:100
height:100
&div class=&content&&
&div class=&left&&&/div&
&div class=&right&&&/div&
第二：添加样式，并在父级元素结束标签前添加both:clear样式。
.content {
height:100
height:100
&div class=&content&&
&div class=&left&&&/div&
&div class=&right&&&/div&
&div class=&clear&&&/div&
第三：添加overflow属性：
.content {
height:100
height:100
&div class=&content&&
&div class=&left&&&/div&
&div class=&right&&&/div&
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
Web前端工程师
作者相关文章在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不是无效， 是有优先级更高的样式替代了。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。阅读 142126
&&&&一、抛一块问题砖（display： block）先看现象：
& & 分析HTML代码结构：
&div&class="outer"&
&&&&&div&class="div1"&1&/div&
&&&&&div&class="div2"&2&/div&
&&&&&div&class="div3"&3&/div&
&&&&&分析CSS代码样式：
.outer{border:&1px&solid&#background:&#fc9;color:&#&margin:&50px&padding:&50}
.div1{width:&80height:&80background:&float:&}
.div2{width:&80height:&80background:&float:&}
.div3{width:&80height:&80background:&float:&}
&&&&这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
&&&&（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
&&&&二、清楚css浮动：
&&&&&&&&&&&&方法一：添加新的元素 、应用 clear：both；
&div&class="outer"&
&&&&&div&class="div1"&1&/div&
&&&&&div&class="div2"&2&/div&
&&&&&div&class="div3"&3&/div&
&&&&&div&class="clear"&&/div&
.clear{clear:&height:&0;&line-height:&0;&font-size:&0}
result： （纠正： padding不会受影响）
& &&方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 &div.outer）
&div&class="outer&over-flow"&&//这里添加了一个class
&&&&&div&class="div1"&1&/div&
&&&&&div&class="div2"&2&/div&
&&&&&div&class="div3"&3&/div&
&&&&&!--&div&class="clear"&&/div&--&
.over-flow{
&&&&overflow:&&zoom:&1;&//zoom:&1;&是在处理兼容性问题
结果：当然是实现了！ &img{display: none}; 略图
&&&&原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好，其他区别我就说不上了，也不浪费时间。
&&&&方法三： 据说是最高大上的方法 &:after 方法：（注意：作用于浮动元素的父亲）
&&&&先说原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：
.outer&{zoom:1;}&&&&/*==for&IE6/7&Maxthon2==*/
.outer&:after&{clear:content:'.';display:width:&0;height:&0;visibility:}&&&/*==for&FF/chrome/opera/IE8==*/
&&&&其中clear:指清除所有浮动；content: '.'; display:对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
最后：但不是不重要，也不是不知道！&
&&&&&&&&下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。
&&&&$('.float').end().结语：清除浮动的方式虽然是有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需多于的标签，而且也能很好的兼容。再次again：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！
（本篇完）
& 著作权归作者所有
人打赏支持
领取时间：
领取条件：开源项目被开源中国收录的开发者可领取
码字总数 18922
后端工程师
文字第七行是清除哦，写成清楚了
最后一种方法after伪元素前面多了个空格噢
评论删除后，数据将无法恢复
文档流 做网页布局的时候，有时候会对网页元素进行浮动，按照自己的需求对网页元素进行排版，元素浮动之后会脱离文档流，造成一些小麻烦，这时候就需要清除浮动，让元素按照自己需求正常排版...
今天给大家分享的是清除浮动的具体代码实现，主要是帮助大家理解哪一种清除浮动比较好，辨析它们的优缺点而已。清除浮动有很多种，如何进行选择清除浮动呢？E良师益友网就拿下面的一个例子来...
罗马教堂的钟声
接上回… 五、浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。 或许我们并没有...
CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。 浮动产生样式效果...
单线程生物
float 是 css 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围...
float属性是CSS常用的一个属性，应用场景广泛，同时也是一个难点，涉及到一些相关细节及注意点。因此，就特别整理总结一下。 一、float介绍 float元素也称为浮动元素，设置了float属性的元素...
为什么清除CSS浮动这么难？ 因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。 而且同样的代码，在各种浏览器中显示效果也有可能不相同，...
菜鸟的进阶
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，...
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有"刨根问底"...
一、什么是清除浮动？ 先说下为什么需要清除浮动。 一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）之后会影响它的兄弟元素的位置和父元素产...
没有更多内容
加载失败，请刷新页面
import json import urllib import urllib.request newConditions = {"jsonrpc":"2.0", "id":1, "method":"eth_getBlockByNumber", "params":["pending",False]} params = json.dumps(newCon......
简介 冒泡排序（Bubble Sort），是一种简单的交换排序方法，算法的名字是由于其排序的过程就像碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”。 以上内容来自 百度百科，含...
一别丶经年
序 本文主要研究一下openmessaging-java maven &dependency&
&groupId&io.openmessaging&/groupId&
&artifactId&openmessaging-api&/artifactId&
&version&0.3.1-alpha&/versio......
作为一个新员工，一个首要的工作就是阅读别人的代码，阅读代码的诸多好处就不说了，我就直奔主题，通过预读代码，发现了几种实现两个不同类型的Bean之 间实现值复制的几种方式，上网查询后发...
在catalina.sh中加上如下代码，上面即jmx配置， -Dcom.sun.management.jmxremote.authenticate=true 即表示需要用户名密码验证，false表示不需要。 jmxremote.access文件： 账号 空格 操作权...
浮躁的码农
Root cause： 代码里用到console对象，而某些版本的IE不开控制台，是没有这个对象的。 因为上下文中没有console这个对象， 所以就直接抛异常了，但是不打开控制台看不到。打开了控制台，上下...
3.0新增容器启动方法 在3.0之前的Spring核心框架中，我们启动一个Spring容器必须使用一个XML文件。而到了3.X之后的版本Spring为创建容器新增了一个入口类——AnnotationConfigApplicationCo...
随风溜达的向日葵
ps -ef | grep run.php | grep -v grep | cut -c 9-15 | xargs kill -9 　　管道符“|”用来隔开两个命令，管道符左边命令的输出会作为管道符右边命令的输入。下面说说用管道符联接起来的 几...
IA-32平台的寄存器： 寄存器 描述 通用 8个32位寄存器，用于存储正在处理的数据 段 6个16位寄存器，用于处理内存访问 指令指针 单一的32位寄存器，指向要执行的下一条指令码 浮点数据 8个80位...
pom.xml添加以下：&plugins&
&groupId&org.springframework.boot&/groupId&
&artifactId&spring-boot-maven-plugin&/artifactId&
少年已不再年少
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有你所不知的 CSS ::before 和 ::after 伪元素用法 - 钉子の次元欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> DIV重叠 CSS让DIV层叠、叠加，让两个DIV或多个按顺序重叠叠加篇
让DIV重叠并按想要顺序重叠需要CSS来实现，即进行实现。
重叠样式需要主要CSS样式解释
1、 重叠顺序属性
2、和设置对象属性为可定位（可重叠）
3、绝对定位具体位置设置
配合的样式
3、 为了观察效果，我们对不同DIV设置不同进行区别
接下来我们为大家奉上DIV按自己意愿重叠、叠加实例布局。我们新建4个，一个大的DIV盒子，为&.div-relative&，三个小DIV盒子放于第一个大DIV对象盒子内，分别为&.div-a&、&.div-b&、&.div-c&。
一、未排序、为排顺序DIV层叠重叠实例
1、完整如下：
&!DOCTYPE&html&&&&charset=&utf-8&&&div重叠&叠加实例&未排层叠顺序&www.divcss5.com&&.div-relative{:&color:#000;&border:1px&solid�&:500&:400px}&.div-a{&position:&left:30&top:30&background:#F00;&width:200&height:100px}&/* css注释说明：&为红色&*/&.div-b{&position:&left:50&top:60&background:#FF0;&width:400&height:200px}&/*&背景为黄色&*/&.div-c{&position:&left:80&top:80&background:#00F;&width:300&height:300px}&/*&为蓝色&*/&&&&&class=&div-relative&&&class=&div-a&我背景为红色&&class=&div-b&我背景为黄色&&class=&div-c&我背景为蓝色&&&&
2、未排叠顺序 实例截图
实现DIV层层叠重叠（未排顺序）实例截图
3、实例在线演示：
4、实例说明：
我们使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在顺序，我们还可以使用实现DIV层排列顺序。
二、通过CSS控制DIV重叠顺序
我们使用以上绝对定位实例代码，只需要对&.div-a&、&.div-b&、&.div-c&分别加入z-index样式即可实现任意顺序排列。
扩展知识：
z-index的值为正整数值，数字越大对应对象层越浮上层（越靠前。
以上实例默认顺序是&.div-c&浮在最上层（蓝色背景层）、&.div-b&浮在中层（黄色背景层）、&.div-a&排最底层（红色背景层）。我们接下来使用z-index样式在不改变html代码情况下实现顺序颠覆，&.div-b&浮在中层（黄色背景层）排序不变，实现&.div-a&浮在最上层（红色背景层）、&.div-c&排最底层（蓝色背景层）。
1、实现按意愿排列DIV层叠重叠顺序完整：
&!DOCTYPE&html&&&&charset=&utf-8&&&div重叠&叠加实例&排层叠顺序&www.divcss5.com&&.div-relative{position:color:#000;border:1px&solid�width:500height:400px}&.div-a{&position:left:30top:30z-index:100;background:#F00;width:200height:100px}&/*&为红色&*/&.div-b{&position:left:50top:60z-index:80;background:#FF0;width:400height:200px}&/*&背景为黄色&*/&.div-c{&position:left:80top:80z-index:70;background:#00F;width:300height:300px}&/*&背景为蓝色&*/&&&&&class=&div-relative&&&class=&div-a&我背景为红色&&class=&div-b&我背景为黄色&&class=&div-c&我背景为蓝色&&&&
2、div层叠顺序实例截图
实现红背景的&div-a&与蓝色背景&div-c&层叠顺序替换实例截图
3、此实例演示：
4、我们在不改变第一个实例的HTML代码下，对&div-a&、&div-b&、&div-c&绝对定位实施后加入z-index实现层叠顺序改变。
三、DIV重叠总结
要实现DIV重叠，并改变实现DIV盒子层叠重叠顺序，我们对父级使用position:relative,对子级使用position:absolute、z-index（重叠顺序）、left，right，top，bottom相当于父级具体位置。
相关DIV CSS教程
打包下载以上两个实例：
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 21:53
原创：本文www.divcss5.com DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT DIVCSS5.com 学习与资源分享平台}