返回
基础
分类

清除浮动不仅能解决页面错位的现象,2.使内嵌支持宽高

日期: 2020-01-02 07:49 浏览次数 : 198

浮动导致布局变动,浮动布局变动

float: none | left | right | inherit

none:默认值,即不浮动

left:向页面的左侧浮动

right:向页面的右侧浮动

inherit:继承父元素的float值(一般不建议使用inherit,ie不支持这个选项)

重点:

1、对于块级元素来说,在不设置宽度的情况系,默认的宽度是100%,一旦设置了浮动,它的宽度就会根据内容进行自动调整。

2、设置了浮动的元素会脱离正常的文档流,我们可以这样理解:设置浮动后,元素不仅在Y轴上浮动起来,在Z轴上,也浮动起来。默认情况下,父元素的高度会根据子元素的内容进行调整,而如果我们将子元素设置为浮动,父元素的高度就会变为0。

3、虽然浮动的元素脱离了文档流,但是里面的内容仍然占据空间,会根据相对位置进行布局。

这里举个例子:

必赢手机登录网址 1<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> .div_float{ border:1px solid #f00; float: left; } .div_none{ border: 2px solid #090; } </style> </head> <div class="div_float">div_float</div> <div class="div_none">div_none</div> </body> </html> View Code

必赢手机登录网址 ,效果:

必赢手机登录网址 2

 

float: none | left | right | inherit none:默认值,即不浮动 left:向页面的左侧浮动 right:向页面的右侧浮动 in...

html清除浮动的6种方法示例,html浮动6种示例

**使用display:inline-block会出现的情况:

**1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置的时候宽度由内容撑开
5.在IE6,7下步支持块标签

由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right

使用浮动时出现的情况:

1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置不宽高的时候宽度由内容撑开
清除浮动不仅能解决页面错位的现象,2.使内嵌支持宽高。4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)
5.元素添加浮动,会脱离文档流,按照指定的一个方向移动,直到碰到父级的边界或者另一个浮动元素停止(文档流是文档中可显示对象在排列时所占用的位置)

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>

下面的代码只有box1浮动,则box1,box2重叠一起。两者都浮动就不会重叠

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

清浮动的方法:
1.给父级也加浮动
(这种情况当父级margin:0 auto;时不居中)

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

**2.给父级加display:inline-block;(同方法1,不居中。只有IE6,7居中)

**

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
*/
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

**3.在浮动元素下加<div class="clear"></div>

**  .clear{ height:0px;font-size:0;clear:both;}但是在ie6下,块元素有最小高度,即当height<19px时,默认为19px,解决方法:font-size:0;或overflow:hidden;

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<div class="clear"></div>
    .clear{ height:0px;font-size:0;clear:both;}
*/
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
        <div class="clear"></div>
</div>
</body>
</html>

4.在浮动元素下加<br clear="all">

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<div class="clear"></div>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>
*/
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
    <br clear="all"/>
</div>
</body>
</html>

5.给浮动元素父级加{zoom:1;} :after{content:""; display:block;clear:both;}

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<div class="clear"></div>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>

    5. 给浮动元素的父级加{zoom:1;}
    :after{content:""; display:block;clear:both;}

    **在IE6,7下浮动元素的父级有宽度就不用清浮动

    haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

  display: inline-block
  height: (任何值除了auto)
  float: (left 或 right)
  width: (任何值除了auto)
  zoom: (除 normal 外任意值)
*/
</style>
</head>
<body>
<div class="box clear">
    <div class="div"></div>
</div>
</body>
</html>

6.给浮动元素父级加overflow:auto;

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;border:1px solid #000;overflow:auto;}
.div1{ width:260px;height:400px;background:Red;float:left;}
</style>
</head>
<body>
<div class="box">
    <div class="div1"></div>
</div>
</body>
</html>

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

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

一、浮动现象例子

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

必赢手机登录网址 3 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

   必赢手机登录网址 4    必赢手机登录网址 5

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

                              图1 效果图

二、消除浮动的方法

1.利用br元素的clear属性

  br标签属性中的clear属性具有left、right和all三个属性值,可以用来清除浮动。但是此种方法需要引入一个额外的br标签,破坏了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 </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;},代码如下:

必赢手机登录网址 7 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元素,代码如下:

必赢手机登录网址 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 /*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

效果如下图:

必赢手机登录网址 9

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

3.利用css中的overflow属性

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

必赢手机登录网址 10 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,也可以清除浮动且高度适应。但是会引起意想不到的后果。代码如下:

必赢手机登录网址 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 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

效果如下图所示:

必赢手机登录网址 12

5.利用css伪对象::after

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

必赢手机登录网址 13 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)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,...

HTML要怎清除浮动?

  推荐的去除浮动代码为:在css文件中定义如下的class
  .clearFloat:after {
  visibility: hidden;
  clear: both;
  display: block;
  height: 0px;
  content: "."
  }
  .clearFloat {
  zoom: 1;
  }
  使用方法如下
  <div class="clearFloat">
  <div style="float:left;">浮动</div>

  <div style="float:right;">浮动</div>

  </div>  

HTML网页中怎一次性清除所有浮动?我的代码有问题为何还是浮动?

这代码本身没有问题。楼主所说的清除浮动,是要实现什么效果呢?
楼主希望的是这样的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用clear快速清除所有对像浮动</title>
<style type="text/css">
<!--
.box1 {background-color: #66CCFF;height:40px;width: 100px;border: 1px solid #336666;}
.box2 {background-color: #FF0000;height:40px;width: 100px;border: 1px solid #336666;}
.box3 {background-color: #00FF00;height:40px;width: 100px;border: 1px solid #336666;}
.clear{clear:both;}
-->
</style>
</head>
<body>

<div class="box1">我原来位置是[横排]的</div>
<div class="box2">我原来位置是[横排]的</div>
<div class="box3">我原来位置是[横排]的</div>

</body>
</html>  

使用display:inline-block会出现的情况: 1.使块元素在一行显示 2.使内嵌支持宽高 3.换行被解析了...