CSS那些事儿-阅读随笔3（清除浮动）
浮动主要是由浮动（float）属性导致的页面错位现象，清除浮动不仅能解决页面错位的现象，还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题。在CSS样式中，主要利用clear属性中的both、left和right 3个属性值清除由浮动产生的左、右浮动效果。
一、浮动现象例子
下面举一个很简单的浮动的例子，假设一个float_box（背景色为#aff）中包含两个div，且一个是左浮动（float:left），另一个是右浮动（float:right）。在float_box外再添加一个没有浮动属性的div（no_float），那么代码以及预期效果和实际效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试位置</div> </body>
</html>
a.预期效果 b.实际效果
图1 效果图
二、消除浮动的方法
1.利用br元素的clear属性
br标签属性中的clear属性具有left、right和all三个属性值，可以用来清除浮动。但是此种方法需要引入一个额外的br标签，破坏了HTML的原有结构。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
/*zoom: 1;*/
/*overflow: hidden;*/
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<br clear="all">
</div>
<div class="no_float">测试位置</div>
</body>
</html>
效果如图1（a）所示。
2.利用css样式中的clear属性
a.引入br标签，但是为其添加css修饰.clear_float{clear:both;},代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
/*zoom: 1;*/
/*overflow: hidden;*/
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
/*clear: both;*/
}
.clear_float{
clear: both;
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<br class="clear_float">
</div>
<div class="no_float">测试位置</div>
</body>
</html>
效果如图1（a）所示。
b.在发生浮动的元素后的元素中添加.clear_float{clear:both;},避免引入多余的HTML元素，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
/*zoom: 1;*/
/*overflow: hidden;*/
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
/*clear: both;*/
}
.clear_float{
clear: both;
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
<div class="no_float clear_float">测试位置</div>
</body>
</html>
效果如下图：
可以从上图中看出，虽然这种方法清除了浮动的错误，但是float元素的父元素高度没有适应float元素的高度（背景没颜色）。
3.利用css中的overflow属性
为float元素的父元素添加css属性overflow:hidden，也可以清除浮动且高度适应。但是该属性会使div溢出部分隐藏，存在弊端。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
overflow: hidden;
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试位置</div>
</body>
</html>
效果如图1（a）所示。
注：overflow:visible清除浮动只对ie浏览器有效，overflow:auto清除浮动且多层嵌套时，会对点击事件产生影响。
4.利用css中的display:table属性
为float元素的父元素添加css属性display:table，也可以清除浮动且高度适应。但是会引起意想不到的后果。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
display:table;
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试位置</div>
</body>
</html>
效果如下图所示：
5.利用css伪对象::after
清除浮动的条件之一是必须在浮动元素之后，因此只能利用::after而不使用::before (对于ie浏览器，需要9或以上才支持)，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.float_box{
background-color: #aff;
}
.float_left{
float:left;
width: 200px;
height: 100px;
border: 2px solid #f00;
}
.float_right{
float:right;
width: 200px;
height: 100px;
border: 2px solid #00f;
}
.no_float{
color: #fff;
background-color: #aaa;
/*clear: both;*/
}
.float_box::after{
clear: both;
display: block;
content: "";
}
</style>
</head>
<body>
<div class="float_box">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试位置</div>
</body>
</html>
效果如图1（a）所示。
注：对于ie浏览器，上述方法都需要在.float_box中添加zoom:1属性，来消除ie的haslayout效果。
CSS那些事儿-阅读随笔3（清除浮动）的更多相关文章
- CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）
在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符 类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符 ...
- CSS技巧（一）：清除浮动
什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...
- CSS基础（float属性与清除浮动）
3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流 ...
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- CSS读书笔记（3）---清除浮动的几种方法
浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...
- CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？
http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- CSS(7)--- 通俗讲解清除浮动
CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...
随机推荐
- 连续改变Chrome浏览器窗口大小，可以导致内存泄漏
最近在做响应式布局的页面,在开发测试过程中,为了看到页面在不同尺寸的窗口中的表现,因此要不停的拖动浏览器来改变其窗口大小:开始在Chrome浏览器下查看页面,拖动了几次,感觉电脑明显的卡了下来,刚开没 ...
- Spark Streaming揭秘 Day33 checkpoint的使用
Spark Streaming揭秘 Day33 checkpoint的使用 今天谈下sparkstreaming中,另外一个至关重要的内容Checkpoint. 首先,我们会看下checkpoint的 ...
- 转 在无法通过yum下载非标准包时，怎么办
在CentOS下,我们可以通过yum来下载或更新rpm包,但是标准的源(repository)里只提供一部分的rpm包,虽然大部分情况下,这些包是够用的.但是有时候还是需要下载其他的一些非标准的包,如 ...
- SQL动态更新表字段 传入字段可能为空
小技巧: 项目组有修改产品的基本信息字段 但有时候传入的字段可能为空 也可能不为空 动态修改表中字段. USE [BetaProductMarket_DB] GO )) BEGIN DROP PRO ...
- SIM900A访问HTTP的简单方法
最近做项目,使用Arduino控制设备,读取数据,然后通过移动网络传送到服务器. 我选用的是正点原子的SIM900A模块.在服务器部署了一个监听程序,Arduino控制SIM900A通过TCP方式把数 ...
- [Learn Android Studio 汉化教程]第四章 : Refactoring Code
[Learn Android Studio 汉化教程]第四章 : Refactoring Code 第四章 Refactoring Code 重构代码 在Android Studio中开发,解决 ...
- 在DataTable中执行DataTable.Select("条件")
.在DataTable中执行DataTable.Select("条件")返回DataTable: // <summary> // 执行DataTable中的查询返回 ...
- DB天气 Alpha版使用说明
一 产品介绍 DB天气是一款能够准确预报天气的软件,它的特点在于它的简洁的设计风格,以及贴心的预报方式.是一款非主流的小清新的天气APP. 二 功能介绍 下面介绍一下DB天气的主界面以及天气功能的实现 ...
- MySQL5.5版本安装失败问题
安装的时候前边都正常,总是到最后一步出问题.前几次是到最后一步没有响应,网上有一种方法是在安装MySQl的时候改变默认的服务名“MySQL”.但我试过这种方法,好几次都没成功. 这种情况下我用了第二种 ...
- shell复习笔记----入门知识
Unix 简史 UNIX 最初是由贝尔实验室(Bell Telephone Laborataries)的计算机科学研究中心开发的,第一版诞生于1970年--也就是在贝尔实验室退出Multics项目不久 ...