通俗讲解清除浮动

上一篇讲了CSS浮动 博客地址：CSS(6)---通俗讲解浮动(float)

一、理解清除浮动

1、为什么要清除浮动

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

2、清除浮动本质

清除浮动的本质: 主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

我们来详细解释下这句话

再解释下就是在标准流下面一个父div没有设置高度属性,那么它的高度就会被子元素的高度撑开。但是如果这个父div中的子元素是浮动的话，如果父div下面再有

一个兄弟div，那么这个兄弟div就会遮挡这个父元素。这个现象也叫浮动溢出。

示例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	.father {

    	height: 200px;

		border: 1px solid red;

		width: 300px

	}

	.big {

		width: 100px;

		height: 100px;

		background-color: purple;

		float: left;

	}

	.small {

		width: 80px;

		height: 80px;

		background-color: blue;

		float: left;

	}

	.footer {

		width: 400px;

		height: 100px;

		background-color: pink;

	}

	</style>

</head>

<body>

	<div class="father"> 父div

		<div class="big">子div</div>

		<div class="small">子div</div>

	</div>

	<div class="footer">兄弟div</div>

</body>

</html>

运行结果

很明显这里，div1和div2已经上浮，而兄弟div就往上移动。这里因为父div有文字所以占了点高度，不然兄弟div会完全覆盖父div。

当然我们可以通过设置父div的高度，来使它不被兄弟div所覆盖。比如这里设置 height: 200px;

在刷新下页面

当父div设置高度后，被覆盖的问题却是解决了，但在很多时候我们是不会去设置父div的高度，因为很多时候我们都不知道父div的高度要设置多少。

所以这个时候需要思考解决这个问题。

二、清除浮动的方法

清除浮动的方法本质: 就是把父盒子里浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动。

基本语法格式

选择器 {clear:属性值;}

属性值


#### 1、额外标签法

通过在浮动元素末尾添加一个空的标签，例如

 <div style="clear:both"></div>

我们在上面的代码添加

<body>

	<div class="father"> 父div

		<div class="big">子div</div>

		<div class="small">子div</div>

		<div style="clear:both"></div>  <!--  只需在父盒子里最后面添加这个空标签添加clear:both属性就可以清除浮动 -->

	</div>

	<div class="footer">兄弟div</div>

</body>

运行结果

完美解决了。

优点 通俗易懂，书写方便。

缺点 添加无意义的标签，结构化较差。

2、父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面会讲）

可以给父级元素添加： overflow为 hidden|auto|scroll  都可以实现。

我们将上面代码修改为

<body>

	<div class="father" style="overflow: hidden;"> 父div  <!-- 父元素添加 overflow: hidden -->

		<div class="big">子div</div>

		<div class="small">子div</div>

	</div>

	<div class="footer">兄弟div</div>

</body>

也是能实现去除浮动的效果。

优点 代码简洁

缺点 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了**

示例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>使用after伪元素清除浮动</title>

	<style>

	.clearfix:after {  /*正常浏览器 清除浮动*/

		content:"";

		display: block;

		height: 0;

		clear: both;

		visibility: hidden;

	}

	.clearfix {

		*zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/

	}

	.father {

		border: 1px solid red;

		width: 300px;

	}

	.big {

		width: 100px;

		height: 100px;

		background-color: purple;

		float: left;

	}

	.small {

		width: 80px;

		height: 80px;

		background-color: blue;

		float: left;

	}

	.footer {

		width: 400px;

		height: 100px;

		background-color: pink;

	}

	</style>

</head>

<body>

	<div class="father clearfix">

		<div class="big"></div>

		<div class="small"></div>

	</div>

	<div class="footer"></div>

</body>

</html>

优点 符合闭合浮动思想 结构语义化正确

缺点 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

4、使用before和after双伪元素清除浮动

使用方法 将上面的clearfix样式替换成如下

	.clearfix:before, .clearfix:after {

		content: "";

		display: table;

	}

	.clearfix:after {

		clear: both;

	}

	.clearfix {

		*zoom: 1;

	}

优点 代码更简洁

缺点 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

5、总结

1、在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式.文档结构更加清晰；

2、在小模块如ul里推荐使用overflow:hidden;（同时留意可能产生的隐藏溢出元素问题）；

```
你如果愿意有所作为，就必须有始有终。(9)
```

CSS(7)--- 通俗讲解清除浮动的更多相关文章

  1. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  2. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

  3. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  4. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

  5. CSS（一）清除浮动

    问题1:关于清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  7. 「CSS」常见的清除浮动方法

    下面介绍几种清除浮动的方案,供大家参考: 使用额外的标签clear:both .parent {padding: 10px;width: 200px;background: red;} .child ...

  8. CSS(5)---通俗讲解盒子模型

    CSS(5)---盒子模型 盒子模型四个关键字:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 一.概念 1. 概念 盒子 ...

  9. CSS 父级方法清除浮动方法

    .baseMod:after { clear: both; content: ' '; display: block; visibility: none; height: 1% } 2. overfl ...

随机推荐

  1. Web安全之注入点构造

    在测试过程中,经常需要自己本地构造注入点来进行SQL测试,这边分享一下,不同环境下构造SQL注入的代码. PHP+MYSQL版 <?php $con = mysql_connect(" ...

  2. Neo4j:图数据库GraphDB(二)高级查找

    接着上一篇,继续介绍图数据库Neo4j: http://www.cnblogs.com/rongyux/p/5537028.html 三 高级查找操作 1过滤   name = "Tom H ...

  3. [CF467D] Fedor and Essay

    After you had helped Fedor to find friends in the «Call of Soldiers 3» game, he stopped studying com ...

  4. 四jmeter脚本开发

    4.1工作区介绍 4.2http协议录制 a.使用badboy进行录制(目前公司测试系统使用badboy界面不友好,暂时不用,之后再补充) b.jmeter代理服务器进行录制 (1)浏览器代理配置(以 ...

  5. LaTeX常用篇(三)---矩阵与表格

    目录 1. 序言 2. 矩阵 2.1 复杂写法 2.2 简化写法 2.3 复杂矩阵 3. 表格 4. 对齐 更新时间:2019.10.02 1. 序言   矩阵是一个强大的工具,许多东西都能够用矩阵来 ...

  6. linux 下ln命令--笔记

    linux 下ln命令 ln命令用来为文件创建连接,连接类型分为硬连接和符号连接两种,默认的连接类型是硬连接.如果要创建符号连接必须使用"-s"选项.注意:符号链接文件不是一个独立 ...

  7. 解决Dubbo 2.7.3版本使用ConfigCenterConfig集成Apollo No Provider found的问题

    Dubbo 2.7.3 集成Apollo 问题描述 Dubbo 2.7.3支持配置中心外部化配置, 因此只需要定义一个ConfigCenterConfig的Bean. @EnableDubbo(sca ...

  8. MySQL基础篇（1）SQL基础

    SQL是Structure Query Language(结构化查询语言)的缩写,它是使用关系模型的数据库应用语言. 一.SQL分类(DDL,DML,DCL) DDL(Data Definition ...

  9. Java基础（十九）集合（1）集合中主要接口和实现类

    1.Java集合框架为不同类型的集合定义了大量接口 其中,集合有两个基本接口:Collection和Map. 2.各接口的主要特征如下 (1)Collection接口:是List接口.Set接口和Qu ...

  10. 代码作家Alpha冲刺阶段博客目录

    一.Scrum Meeting 1. [第六周会议记录] 2. [第七周会议记录] 二.测试报告 Alpha阶段测试报告 三.习得的软工原理/方法/技能  1. 在项目前期准备中,我们学会了一些页面设 ...