美文网首页
CSS之清除浮动

CSS之清除浮动

作者: sarah_wqq | 来源:发表于2019-01-29 11:22 被阅读0次

三个浮动的元素

<style type="text/css">
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}
</style>
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>
有浮动.png

当外层DIV.outer 没有设置高度,如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,边框就不能被撑开,影响了布局,这种现象叫做浮动溢出

这时需要清除浮动来达到理想效果:


清除浮动后的效果.png

清除浮动的几种方法:

1.clear:both

//div3后面新加一个div
<div class="clear"></div>
//css
.clear{clear:both; height: 0}
  • 简单,浏览器兼容性好。
  • 需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

2.父级div添加overflow属性

//给父级div outer设置属性
<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>
//css
.over-flow{ overflow: auto; zoom: 1} 

overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hidden和auto值来清除浮动,但不能使用visible值。

zoom:1是IE浏览器的专有属性,Firefox等浏览器不支持。zoom:1设置缩放比例为1,是为了兼容IE,一般和overflow一起用于清除浮动

3.父级div加:after方法

:after代表伪元素(不是伪类),是一个元素之后最近的元素。
利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用clear:after在元素内部增加一个类似于div.clear的效果。

.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
  • 相比增加一个空的div,:after方法文档结构更加清晰

4.给父级div也加上浮动

  • 会使其整体浮动,有时候会影响布局,不推荐使用。

相关文章

  • CSS浮动续

    CSS清除浮动案例 CSS版心居中显示案例 清除浮动的四种用法: 1. 使用空标记清除浮动,隔墙法,增加标签 2....

  • CSS clear both清除浮动

    原文地址:CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...

  • 清除浮动

    一、清除浮动 or 闭合浮动 ? 清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:lef...

  • css之浮动清除

    浮动的清除 浮动的性质: 脱标 贴边 字围 收缩 给浮动的元素的祖先元素加高度(不常用)如果一个元素要浮动,那么它...

  • CSS之清除浮动

    三个浮动的元素 当外层DIV.outer 没有设置高度,如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开...

  • css之清除浮动

    1、给下一个元素加clear:both;缺点:导致下一个元素,margin失效。 2、给空元素加clear:bot...

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要...

  • 浮动和清除(闭合)浮动

    CSS之float and clear float 浮动和清除(闭合)浮动 目录 1.背景介绍 2.知识剖析 3....

  • CSS 中的浮动

    浮动的定义: 元素脱离文档流 举栗子: 修改 CSS 代码,清除浮动: 浮动的影响: 父元素高度塌陷 清除浮动: ...

  • CSS浮动.清除浮动

    给父级元素设置高度 在底部添加一个空元素,清除浮动 父级div定义 overflow:hidden或者auto 为...

网友评论

      本文标题:CSS之清除浮动

      本文链接:https://www.haomeiwen.com/subject/xonajqtx.html