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.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...
随机推荐
- foreach的原理
1.foreach 语句对实现 System.Collections .IEnumerable 或 System.Collections.Generic .IEnumerable <T > ...
- Windows 8.1 (64bit) 下搭建 MongoDB 2.4.9 环境
一.下载MongoDB 2.4.9版 进入MongoDB官方网站的下载页面. 找到Windows 64-bit版的下载链接进行下载. 二.安装MongoDB 2.4.9版 将下载的文件解压到任意目录. ...
- VB 核心编程及通用模块开发 笔记1
前言:学习任何编程语言.编程工具的目的不外乎解决生活问题,能够快速.高效解决问题的方式就是不错的方式,至于选择什么“工具”,众位看官看着办,本人虽然有过3年vb开发经验,但是一直没有深入学习,现已购买 ...
- Spark Streaming揭秘 Day17 资源动态分配
Spark Streaming揭秘 Day17 资源动态分配 今天,让我们研究一下一个在Spark中非常重要的特性:资源动态分配. 为什么要动态分配?于Spark不断运行,对资源也有不小的消耗,在默认 ...
- 《C和指针》 读书笔记 -- 第14章 预处理器
1.相邻字符串常量被自动链接为一个字符串:"my""name"="myname" 2.##把位于两边的符号连接成一个符号: #define ...
- fedora 安装chrome
1. 下载chrome的rpm安装包 2. 安装lsb: sudo yum install redhat-lsb.x86_64 3. rpm -i google-chrome-{xxxxx}.rp ...
- Android的ProgressBar以及自定义进度条
1.xml文件 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...
- HTML标签语义对照表
标签名 英文全拼 中文翻译 div division 分隔 span span 范围 ol ordered list 排序列表 ul unordered list 不排序列表 li list item ...
- SQL学习中（一）序列
序列可以理解数值序列生成器,通俗的说是按照已经设定的规则自动产生数据的方案对象.--SQL SERVER不支持 个人认为序列类似于SQLSERVER中的identity(1,1),可以用于在表中添加数 ...
- js高级技巧笔记(一)
安全的类型检测 Js的类型检测机制并非完全可靠,发生错误否定及错误肯定的情况也不少: 在safari 在对正则表达式应用typeof操作符时返回"function",因此很难确定某 ...