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.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...
随机推荐
- 关于B/S系统在移动端应用的一些注意的地方（不断更新）
1.不要直接把PC端的页面直接搬到移动端来用.这里举个例子:有个活动页面,在PC端和手机端的Safari里展现都好,但是当用手机APP(如手机淘宝)扫码打开后,却没法顺畅的异步获取到jsonp的信息. ...
- 設定 Bootstrap/SASS/Bower/gulp (Windows平台)
請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...
- PHPstorm 的快捷键
// ctrl+shift+n 查找文件// ctrl+j 插入活动代码提示// ctrl+alt+t 当前位置插入环绕代码// alt+insert ...
- PHP微信开发代码
1,SAE上申请服务器 2,绑定测试账号 3,Token验证 <?php /* http://www.cnblogs.com/xrhou12326/ CopyRight 2014 All Rig ...
- 研读代码必须掌握的Eclipse快捷键
1. Ctrl+左键 和F3 这个是大多数人经常用到的,用来查看变量.方法.类的定义跳到光标所在标识符的定义代码.当按执行流程阅读时,F3实现了大部分导航动作. 2 Ctrl+Shift+G在工作空间 ...
- JQuery 知识点
1:animate 动画效果 $(function () { $(".sidebar-nav a").mouseover(function () { $(this).animate ...
- 1024: [SCOI2009]生日快乐 - BZOJ
Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...
- 【链表】BZOJ 2288: 【POJ Challenge】生日礼物
2288: [POJ Challenge]生日礼物 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 382 Solved: 111[Submit][S ...
- asp 文件上传(ASPUpload组件上传)
要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上传组件 ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...