右列自适应宽度的三种方式,消释浮动

第一种方法,网上流传比较广的方法。采用左列 left
浮动,右列不浮动,采用 margin-left 定位的方式。此方法会有一个 ie6
3px bug . 另外,当浏览器框缩小到一定程度时,右侧会掉下来。

CSS那些事儿-阅读随笔3(清除浮动),css随笔

  浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题。在CSS样式中,主要利用clear属性中的both、left和right
3个属性值清除由浮动产生的左、右浮动效果。

一、浮动现象例子

下面举一个很简单的浮动的例子,假设一个float_box(背景色为#aff)中包含两个div,且一个是左浮动(float:left),另一个是右浮动(float:right)。在float_box外再添加一个没有浮动属性的div(no_float),那么代码以及预期效果和实际效果如下:

图片 1 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 } 10
.float_left{ 11 float:left; 12 width: 200px; 13 height: 100px; 14
border: 2px solid #f00; 15 } 16 .float_right{ 17 float:right; 18
width: 200px; 19 height: 100px; 20 border: 2px solid #00f; 21 } 22
.no_float{ 23 color: #fff; 24 background-color: #aaa; 25 } 26
</style> 27 </head> 28 <body> 29 <div
class=”float_box”> 30 <div
class=”float_left”>左浮动元素</div> 31 <div
class=”float_right”>右浮动元素</div> 32 </div> 33
<div class=”no_float”>测试位置</div> 34 35 </body> 36
</html> View Code

   图片 2   
图片 3

                                    
a.预期效果                                                                                
b.实际效果

                              图1 效果图

二、消除浮动的方法

1.利用br元素的clear属性

  br标签属性中的clear属性具有left、right和all三个属性值,可以用来清除浮动。但是此种方法需要引入一个额外的br标签,破坏了HTML的原有结构。代码如下:

图片 4 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/
10 /*overflow: hidden;*/ 11 } 12 .float_left{ 13 float:left; 14
width: 200px; 15 height: 100px; 16 border: 2px solid #f00; 17 } 18
.float_right{ 19 float:right; 20 width: 200px; 21 height: 100px; 22
border: 2px solid #00f; 23 } 24 .no_float{ 25 color: #fff; 26
background-color: #aaa; 27 /*clear: both;*/ 28 } 29 </style> 30
</head> 31 <body> 32 <div class=”float_box”> 33
<div class=”float_left”>左浮动元素</div> 34 <div
class=”float_right”>右浮动元素</div> 35 <br clear=”all”>
36 </div> 37 <div class=”no_float”>测试位置</div> 38
</body> 39 </html> View
Code

效果如图1(a)所示。

2.利用css样式中的clear属性

  a.引入br标签,但是为其添加css修饰.clear_float{clear:both;},代码如下:

图片 5 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/
10 /*overflow: hidden;*/ 11 } 12 .float_left{ 13 float:left; 14
width: 200px; 15 height: 100px; 16 border: 2px solid #f00; 17 } 18
.float_right{ 19 float:right; 20 width: 200px; 21 height: 100px; 22
border: 2px solid #00f; 23 } 24 .no_float{ 25 color: #fff; 26
background-color: #aaa; 27 /*clear: both;*/ 28 } 29 .clear_float{ 30
clear: both; 31 } 32 </style> 33 </head> 34 <body> 35
<div class=”float_box”> 36 <div
class=”float_left”>左浮动元素</div> 37 <div
class=”float_right”>右浮动元素</div> 38 <br
class=”clear_float”> 39 </div> 40 <div
class=”no_float”>测试位置</div> 41 </body> 42
</html> View Code

效果如图1(a)所示。

  b.在发生浮动的元素后的元素中添加.clear_float{clear:both;},避免引入多余的HTML元素,代码如下:

图片 6 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/
10 /*overflow: hidden;*/ 11 } 12 .float_left{ 13 float:left; 14
width: 200px; 15 height: 100px; 16 border: 2px solid #f00; 17 } 18
.float_right{ 19 float:right; 20 width: 200px; 21 height: 100px; 22
border: 2px solid #00f; 23 } 24 .no_float{ 25 color: #fff; 26
background-color: #aaa; 27 /*clear: both;*/ 28 } 29 .clear_float{ 30
clear: both; 31 } 32 </style> 33 </head> 34 <body> 35
<div class=”float_box”> 36 <div
class=”float_left”>左浮动元素</div> 37 <div
class=”float_right”>右浮动元素</div> 38 </div> 39
<div class=”no_float clear_float”>测试位置</div> 40
</body> 41 </html> View
Code

效果如下图:

图片 7

  可以从上图中看出,虽然这种方法清除了浮动的错误,但是float元素的父元素高度没有适应float元素的高度(背景没颜色)。

3.利用css中的overflow属性

  为float元素的父元素添加css属性overflow:hidden,也可以清除浮动且高度适应。但是该属性会使div溢出部分隐藏,存在弊端。代码如下:

图片 8 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 overflow:
hidden; 10 } 11 .float_left{ 12 float:left; 13 width: 200px; 14 height:
100px; 15 border: 2px solid #f00; 16 } 17 .float_right{ 18
float:right; 19 width: 200px; 20 height: 100px; 21 border: 2px solid
#00f; 22 } 23 .no_float{ 24 color: #fff; 25 background-color: #aaa;
26 } 27 </style> 28 </head> 29 <body> 30 <div
class=”float_box”> 31 <div
class=”float_left”>左浮动元素</div> 32 <div
class=”float_right”>右浮动元素</div> 33 </div> 34
<div class=”no_float”>测试位置</div> 35 </body> 36
</html> View Code

效果如图1(a)所示。

注:overflow:visible清除浮动只对ie浏览器有效,overflow:auto清除浮动且多层嵌套时,会对点击事件产生影响。

4.利用css中的display:table属性

  为float元素的父元素添加css属性display:table,也可以清除浮动且高度适应。但是会引起意想不到的后果。代码如下:

图片 9 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 display:table;
10 } 11 .float_left{ 12 float:left; 13 width: 200px; 14 height: 100px;
15 border: 2px solid #f00; 16 } 17 .float_right{ 18 float:right; 19
width: 200px; 20 height: 100px; 21 border: 2px solid #00f; 22 } 23
.no_float{ 24 color: #fff; 25 background-color: #aaa; 26 } 27
</style> 28 </head> 29 <body> 30 <div
class=”float_box”> 31 <div
class=”float_left”>左浮动元素</div> 32 <div
class=”float_right”>右浮动元素</div> 33 </div> 34
<div class=”no_float”>测试位置</div> 35 </body> 36
</html> View Code

效果如下图所示:

图片 10

5.利用css伪对象::after

  清除浮动的条件之一是必须在浮动元素之后,因此只能利用::after而不使用::before
(对于ie浏览器,需要9或以上才支持),代码如下:

图片 11 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>css-test</title> 6
<style> 7 .float_box{ 8 background-color: #aff; 9 } 10
.float_left{ 11 float:left; 12 width: 200px; 13 height: 100px; 14
border: 2px solid #f00; 15 } 16 .float_right{ 17 float:right; 18
width: 200px; 19 height: 100px; 20 border: 2px solid #00f; 21 } 22
.no_float{ 23 color: #fff; 24 background-color: #aaa; 25 /*clear:
both;*/ 26 } 27 .float_box::after{ 28 clear: both; 29 display: block;
30 content: “”; 31 } 32 </style> 33 </head> 34 <body>
35 <div class=”float_box”> 36 <div
class=”float_left”>左浮动元素</div> 37 <div
class=”float_right”>右浮动元素</div> 38 </div> 39
<div class=”no_float”>测试位置</div> 40 </body> 41
</html> View Code

效果如图1(a)所示。

注:对于ie浏览器,上述方法都需要在.float_box中添加zoom:1属性,来消除ie的haslayout效果。

浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,…

<!DOCTYPE html> <html> <head>
<title>方法一</title> <style type=”text/css”> #left
{width:100px;height:100px;background-color:#ccc;border:2px solid
#333;float:left;} #right {height:300px;margin-left:104px; border:2px
solid #333;background:#ccc
url() no-repeat; }
</style> </head> <body> <div id=”left”> left
</div> <div id=”right”> 1111<br />1111<br
/>1111<br />1111<br />1111<br />1111<br
/>111<br />11</div> </body> </html>

第二种方法:采用左列向左浮动,右列绝对定位。为解决 ie6
下右列不撑开问题,在右列中设置一元素右浮动 ( 不是个好方法 )。

<!DOCTYPE html> <html> <head>
<title>方法二</title> <style type=”text/css”>
#sidebar
{width:100px;height:100px;float:left;background-color:#cccccc;border:2px
solid #333333;} #Wrap
{position:absolute;left:113px;right:5px;height:300px;border:2px solid
#333333; background:#ccc url()
no-repeat;} #floatSpan {float:right;} //for ie6 </style>
</head> <body> <div id=”sidebar”> left </div>
<div id=”Wrap”> right<br />right<br />right<br
/>right<br />right<br />right<br /> right<br
/>right<br />right<br /> <span
id=”floatSpan”><span> </div> </body> </html>

此中 wrap 的 right:0; 本是为撑开右列而设置。无奈 ie6 下无效。故设置了
floatSpan。有此之后,去除 float:right 也无影响于效果。

第三种方法,左列使用绝对定位,右列使用
margin-left 定位。

(个人认为此法仍然是最好的方法。千一网络编辑注)

发表评论

电子邮件地址不会被公开。 必填项已用*标注