CSS的浮动以及清楚浮动的方法

1、CSS中的浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动的元素会脱离文档流，所以文档普通流中的块框表现得就像浮动框不存在一样。

2、浮动带来的副作用

块状元素，会钻进浮动元素的下面，被浮动元素所覆盖；
行内元素，例如文字，则会环绕在浮动元素的周围，为浮动元素留出空间；
浮动元素的父元素坍缩；

如果不希望出现以上这些效果，就需要清除浮动来解决后患，使后面的元素表现的跟浮动前一样，这样既实现了元素浮动，又实现了后来的元素不会受其影响产生不必要的麻烦。

3、清楚浮动（八种）

（1）父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题；

优点：简单、代码少、容易掌握；

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题；
建议：不推荐使用，只建议高度固定的布局时使用。

代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>清楚浮动：父级div定义height</title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;/*清除浮动代码*/height: 200px;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}</style>
</head>
<body><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>
</body>
</html>

（2）结尾处加空div标签，clear：both

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度；
优点：简单、代码少、浏览器支持好、不容易出现怪问题；

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好；

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。

代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>结尾处加空div标签clear both </title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}/*清楚浮动代码*/.clearfloat{clear:both;}</style>
</head>
<body><div class="div1"><div class="left">Left</div><div class="right">Right</div><div class="clearfloat"></div>    <!--结尾处加空标签--></div><div class="div2">div2</div>
</body>
</html>

（3）父级div定义，伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题；

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）；

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持；

建议：推荐使用，建议定义公共类，以减少CSS代码。
代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>结尾处加空div标签clear both </title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}/*清除浮动代码*/.clearfloat:after{display: block;clear: both;content: "";visibility: hidden;height: 0;}.clearfloat{zoom: 1;}</style>
</head>
<body><div class="div1 clearfloat"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>
</body>
</html>

（4）父级div定义，overflow：hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度；

优点：简单、代码少、浏览器支持好；

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏；

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>父级div定义 overflow:hidden</title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;/*清除浮动代码*/width: 100%;overflow: hidden;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}</style>
</head>
<body><div class="div1 clearfloat"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>
</body>
</html>

（5）父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度；

优点：简单、代码少、浏览器支持好；

缺点：内部宽高超过父级div时，会出现滚动条；

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>父级div定义 overflow:auto</title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;/*清除浮动代码*/width: 98%;overflow: auto;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}</style>
</head>
<body><div class="div1 clearfloat"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>
</body>
</html>

接下来的三种方法只做了解即可~

（6）父级div也一起浮动

原理：所有代码一起浮动，就变成了一个整体；

优点：没有优点；

缺点：会产生新的浮动问题；

建议：不推荐使用，只作了解。

代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>父级div也一起浮动</title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;/*清除浮动代码*/width: 100%;float: left;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;/*清除浮动代码*/clear: both;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}</style>
</head>
<body><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>
</body>
</html>

（7）父级div定义 display:table

原理：将div属性变成表格；

优点：没有优点；

缺点：会产生新的未知问题；

建议：不推荐使用，只作了解。

代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>父级div定义 diaplay:table</title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;/*清除浮动代码*/width: 100%;display: table;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}</style>
</head>
<body><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>
</body>
</html>

（8）结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both ；

建议：不推荐使用，只作了解。

代码：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>父级div定义 diaplay:table</title><style type="text/css">.div1{background-color: #762564;border:1px solid #ccc;color: #fff;/*清除浮动代码*/zoom:1;}.div2{background-color: #656532;border:1px solid #ddd;height: 100px;margin-top: 10px;color: #fff;}.left{float: left;width: 20%;height: 200px;background: red;}.right{float: right;width: 30%;height: 80px;background: green;}.clearfloat{clear: both;}</style>
</head>
<body><div class="div1"><div class="left">Left</div><div class="right">Right</div><br class="clearfloat" />    <!--结尾处加br标签--></div><div class="div2">div2</div>
</body>
</html>

参考文章：http://www.jb51.net/css/173023.html

CSS的浮动以及清楚浮动的方法相关推荐

css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
html清除div浮动,HTML_清除浮动的最优方法:CSS，在CSS森林群里讨论一个margin的 - phpStudy...
清除浮动的最优方法:CSS 在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性 ...
HTML如何消除别的块的影响,CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？...
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: 1 2 3 分析CSS代码样式: .outer{border: 1px solid #ccc;background: ...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS ...
html div元素浮动,CSS实现元素浮动和清除浮动的方法
浮动基本介绍在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
CSS为何清除浮动以及清除浮动方法总结
文章目录一,浮动布局的注意点二,为什么需要清除浮动? 三,清除浮动的本质四,清除浮动的方法 1. 额外标签法(隔墙法) 2.父元素overflow 3.after伪元素清除 4.双伪元素清除浮动 ...
CSS清除浮动的几种常见方法
文章目录浮动优点缺点清除浮动一.额外标签法实例二.父级添加overflow属性实例三.使用:after 实例四.使用双伪元素实例五.手动设置父级高度实例注意浮动当元素浮 ...
css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
「CSS」常见的清除浮动方法
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素,浮动元素会造成父元素高度塌陷,所以当我们设置float后,需进行相应的清除浮动操作. 方法一:创建B ...

CSS的浮动以及清楚浮动的方法

CSS的浮动以及清楚浮动的方法相关推荐

最新文章

热门文章