“清除浮动”的几种方法

1. “清除浮动” ？？准确的描述应该是“清楚浮动造成的影响”

2.如何清除浮动造成的影响？？？

栗子块级div元素包含一个内联img元素，此时div的高应该是图片img撑开的高度，当设置了图片img元素设置浮动后，div高度就会坍塌

浮动导致高度坍陷代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>如何清除浮动造成的影响</title>
 6 </head>
 7 <body>
 8     <div style=" background-color:#CBD6EA; padding:5px;" >
 9         <img src="images/item_05.png" width="50px" style="float:left;">
10     </div>
11 </body>
12 </html>

3.几种“清楚浮动造成的影响”解决方案

首先的说明包裹性，因为具有包裹性的元素都可以清除浮动造成的影响

对于float浮动包裹性 对于一个块级block元素，div默认宽度100%，设置float:left/right后，其宽度表现为内容的宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用float: left清除浮动造成的影响</title>
 6     <style type="text/css">
 7         .box {
 8             background-color:#CBD6EA;
 9             padding:5px;
10             float: left;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="box">
16         <img src="images/item_05.png" width="50px" style="float:left;">
17     </div>
18 </body>
19 </html>

对于absolute绝对定位包裹性 对于一个块级block元素，div默认宽度100%，设置position:absolute后，其宽度表现为内容的宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用position: absolute清除浮动造成的影响</title>
 6     <style type="text/css">
 7         .box {
 8             background-color:#CBD6EA;
 9             padding:5px;
10             position: absolute;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="box">
16         <img src="images/item_05.png" width="50px" style="float:left;">
17     </div>
18 </body>
19 </html>

无论是float浮动或是absolute绝对定位最终都向display:inline-block靠拢

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用float: left清除浮动造成的影响</title>
 6     <style type="text/css">
 7         .box {
 8             background-color:#CBD6EA;
 9             padding:5px;
10             float: left;
11         }
12     </style>
13 </head>
14 <body>
15
16     <div class="box">
17         <img src="images/item_05.png" width="50px" style="float:left;">
18     </div>
19
20 </body>
21 </html>

对于display:inline-block而言，是块级block元素还是inline元素，使用了该属性后，block元素体现为内容的宽度，自左向右排列，inline元素体现为可以像块级元素那样设置宽高 <block冰块 inline液体 inline-block冰水混合物>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用inline-block清除浮动造成的影响</title>
 6     <style type="text/css">
 7         .box {
 8             background-color:#CBD6EA;
 9             padding:5px;
10             display: inline-block;
11         }
12     </style>
13 </head>
14 <body>
15
16     <div class="box">
17         <img src="images/item_05.png" width="50px" style="float:left;">
18     </div>
19
20 </body>
21 </html>

对于 overflow:hidden的包裹性,设置了overflow:hidden属性的坍陷div有了高度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用position: absolute清除浮动造成的影响</title>
 6     <style type="text/css">
 7         .box {
 8             background-color:#CBD6EA;
 9             padding:5px;
10             overflow: hidden;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="box">
16         <img src="images/item_05.png" width="50px" style="float:left;">
17     </div>
18 </body>
19 </html>

对于zoom的包裹性,比例缩放，跟CSS3中transform:scale类似; 已经不能清除浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用position: absolute清除浮动造成的影响</title>
 6     <style type="text/css">
 7         .box {
 8             background-color:#CBD6EA;
 9             padding:5px;
10             zoom: 1;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="box">
16         <img src="images/item_05.png" width="50px" style="float:left;">
17     </div>
18 </body>
19 </html>

清楚浮动造成的影响源码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>清除浮动造成的影响</title>
 6 <style>
 7     * { margin:0; padding:0; }
 8     div { margin-left:10px; width:100px;}
 9     p { margin:0; padding:0; color:#FFF; font-weight:700; font-family:"microsoft yahei"; }
10 </style>
11 </head>
12 <body>
13     <p>1.具有包裹性的元素都可以清除浮动</p>
14     <div style=" background-color:#D20AC2; padding:5px; float:left;" >
15         <img src="images/item_05.png" width="100px" style="float:left;">
16         <p>使用float清除浮动</p>
17     </div>
18     <div style=" background-color:#09C; padding:5px; position:absolute; left:240px; top:22px;" >
19         <img src="images/item_05.png" width="100px" style="float:left;">
20          <p>absoluete清除浮动</p>
21     </div>
22     <div style=" background-color:#E0164E; display:inline-block; padding:5px; " >
23         <img src="images/item_05.png" width="100px" style="float:left;">
24         <p>inline-block清除浮动性</p>
25     </div>
26     <div style=" background-color:#3FD0B5; padding:5px; overflow:hidden;" >
27         <img src="images/item_05.png" width="100px" style="float:left;">
28         <p>overflo清除浮动</p>
29     </div>
30
31     <div style=" background-color:#FF9800; padding:5px; zoom:1; " >
32         <img src="images/item_05.png" width="100px" style="float:left;">
33         <p>zoom清除浮动</p>
34     </div>
35     <div style=" background-color:#E0164E; padding:5px;" >
36         <img src="images/item_05.png" width="100px">
37     </div>
38 </body>
39 </html>

资料参考

对overflow与zoom”清除浮动”的一些认识

时间： 2025-01-05 04:57:18

“清除浮动”的几种方法的相关文章

CSS 清除浮动的四种方法

在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果.如果不清除浮动,会导致父元素的高度撑不开等一系列问题. 那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了. 1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)在浮动元素的后面增加一个块元素,对块元素设置

css清除浮动的几种方法整理

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

css清除浮动的几种方法以及对应规范说明

css清除浮动的几种方法以及对应规范说明 1.{clear:both;}设置了clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,使包含浮动元素的容器高度正常.所以适用于浮动元素后面容器之内有个非浮动元素,或是额外添加一个新的空元素. 2..after- clear-float :after{content:""; display:block; clear:both;}利用伪类添加新元素,原理同上,所以只适用于父容器最后一级子元素是浮动的,即

【转】浅谈 CSS 清除浮动的 6 种方法

转载:浅谈 CSS 清除浮动的 6 种方法在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题引出问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black;

[Web 前端] 018 css 清除浮动的四种方法

清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both(不推荐)(见例2.2) 使用成熟的清浮动样式类 clearfix(见例3) 少废话,上例子例 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test

关于CSS清除浮动的几种方法

如果一个父元素的所有子元素都设置了float效果,则该父元素的高度不会被撑开且颜色也不会显示.这是因为子元素设置float效果后脱离了标准的文档流, 不占据文档空间所以不能把父元素撑开.有时为了解决这个问题可以使用下面几种方法来清除浮动效果. 方法一:使用空标签该方法就是在子元素后再添加一个空标签,空标签可以是<div>也可以是<p>等,但是要设置样式clear : both ;这样就可以达到清除浮动的效果. 方法二:给父元素设置overflow: auto; 该方法是给父元素设

清除浮动的八种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码

关于清除浮动的几种方法

很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美.闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境.如果你有更好的方法不妨提出来大家一起讨论. 问题的提出: 最简单的一种情形就是我们把一个小的.固定宽度的div元素(比如导航.引用等)和其他元素内容一起包含在一个大的div中.比如下面这段代码: <div id="outer"> <di

CSS 清除浮动的4种方法

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{flo

CSS清除浮动的三种方法，很实用

CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一. 下面看今天的教程,此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;}