如何更好利用浮动---浮动的合理利用及清除

桃扇骨 2023-08-17 17:19 86阅读 0赞

CSS浮动合理利用可以带给我们很好的布局体验，但在很多时候因为元素的浮动似乎又给我们带来了很多麻烦。下面我们就来对神奇的浮动一探究竟。

浮动是相对于CSS中的相对定位和绝对定位而言的，浮动的框可以向左向右移动，直到它的外边缘碰到保护框或另一个浮动框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如果包含框太窄，无法容纳水平排列的几个浮动元素，那么空间不足的浮动框会向下移动，直到有足够的空间。如下图左边的图片。大家可能会想，如果浮动元素的高度不同怎么办？如下图右所示~这种情况下框3没有办法继续下移，所以只能卡在那里了~

![160834387144091.png][]

关于CSS浮动，float可谓功不可没。我们通过float属性实现元素的浮动，几乎所有浏览器都支持，属性值包括left（元素向左浮动）right(元素向右浮动)none(默认值，元素不浮动，并会显示在其文本中出现的位置)inherit(规定应该从父元素继承float属性的值)\*低版本的IE不支持inherit属性，不过IE11支持。刚才测试中竟然发现IE不支持png的图片格式，各种sad~

在低版本的IE中，float:right的元素会换行显示，需要把该元素写在同行元素的左边，在IE11中，就不必考虑那么多了，float:right不论写在一行的哪里都是可以的。

float的具体应用：

1可以使图像浮动于一个段落的右侧

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <style type="text/css">
     4 img 
     5 {
     6 float:right
     7 }
     8 </style>
     9 </head>
    10 
    11 <body>
    12 <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
    13 <p>
    14 <img src="/i/eg_cute.gif" />
    15 This is some text. This is some text. This is some text.
    16 This is some text. This is some text. This is some text.
    17 This is some text. This is some text. This is some text.
    18 This is some text. This is some text. This is some text.
    19 This is some text. This is some text. This is some text.
    20 This is some text. This is some text. This is some text.
    21 This is some text. This is some text. This is some text.
    22 This is some text. This is some text. This is some text.
    23 This is some text. This is some text. This is some text.
    24 This is some text. This is some text. This is some text.
    25 </p>
    26 </body>
    27 
    28 </html>

2将带有边框和边界的图像浮动于段落的右侧

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <style type="text/css">
     4 img 
     5 {
     6 float:right;
     7 border:1px dotted black;
     8 margin:0px 0px 15px 20px;
     9 }
    10 </style>
    11 </head>
    12 
    13 <body>
    14 <p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。</p>
    15 <p>
    16 <img src="/i/eg_cute.gif" />
    17 This is some text. This is some text. This is some text.
    18 This is some text. This is some text. This is some text.
    19 This is some text. This is some text. This is some text.
    20 This is some text. This is some text. This is some text.
    21 This is some text. This is some text. This is some text.
    22 This is some text. This is some text. This is some text.
    23 This is some text. This is some text. This is some text.
    24 This is some text. This is some text. This is some text.
    25 This is some text. This is some text. This is some text.
    26 This is some text. This is some text. This is some text.
    27 </p>
    28 </body>
    29 
    30 </html>

3带标题的图像浮动于右侧

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <style type="text/css">
     4 div
     5 {
     6 float:right;
     7 width:120px;
     8 margin:0 0 15px 20px;
     9 padding:15px;
    10 border:1px solid black;
    11 text-align:center;
    12 }
    13 </style>
    14 </head>
    15 
    16 <body>
    17 <div>
    18 <img src="/i/eg_cute.gif" /><br />
    19 CSS is fun!
    20 </div>
    21 <p>
    22 This is some text. This is some text. This is some text.
    23 This is some text. This is some text. This is some text.
    24 This is some text. This is some text. This is some text.
    25 This is some text. This is some text. This is some text.
    26 This is some text. This is some text. This is some text.
    27 This is some text. This is some text. This is some text.
    28 This is some text. This is some text. This is some text.
    29 This is some text. This is some text. This is some text.
    30 This is some text. This is some text. This is some text.
    31 This is some text. This is some text. This is some text.
    32 This is some text. This is some text. This is some text.
    33 This is some text. This is some text. This is some text.
    34 This is some text. This is some text. This is some text.
    35 </p>
    36 
    37 <p>
    38 在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
    39 </p>
    40 </body>
    41 
    42 </html>

4使段落的首字母浮动于左侧

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <style type="text/css">
     4 span
     5 {
     6 float:left;
     7 width:0.7em;
     8 font-size:400%;
     9 font-family:algerian,courier;
    10 line-height:80%;
    11 }
    12 </style>
    13 </head>
    14 
    15 <body>
    16 <p>
    17 <span>T</span>his is some text.
    18 This is some text. This is some text.
    19 This is some text. This is some text. This is some text.
    20 This is some text. This is some text. This is some text.
    21 This is some text. This is some text. This is some text.
    22 This is some text. This is some text. This is some text.
    23 This is some text. This is some text. This is some text.
    24 This is some text. This is some text. This is some text.
    25 </p>
    26 
    27 <p>
    28 在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
    29 </p>
    30 
    31 </body>
    32 </html>

5创建水平菜单

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <style type="text/css">
     4 span
     5 {
     6 float:left;
     7 width:0.7em;
     8 font-size:400%;
     9 font-family:algerian,courier;
    10 line-height:80%;
    11 }
    12 </style>
    13 </head>
    14 
    15 <body>
    16 <p>
    17 <span>T</span>his is some text.
    18 This is some text. This is some text.
    19 This is some text. This is some text. This is some text.
    20 This is some text. This is some text. This is some text.
    21 This is some text. This is some text. This is some text.
    22 This is some text. This is some text. This is some text.
    23 This is some text. This is some text. This is some text.
    24 This is some text. This is some text. This is some text.
    25 </p>
    26 
    27 <p>
    28 在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
    29 </p>
    30 
    31 </body>
    32 </html>

6创建无表格的首页，即用于创建全部网页布局

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <html>
     2 <head>
     3 <style type="text/css">
     4 div.container
     5 {
     6 width:100%;
     7 margin:0px;
     8 border:1px solid gray;
     9 line-height:150%;
    10 }
    11 div.header,div.footer
    12 {
    13 padding:0.5em;
    14 color:white;
    15 background-color:gray;
    16 clear:left;
    17 }
    18 h1.header
    19 {
    20 padding:0;
    21 margin:0;
    22 }
    23 div.left
    24 {
    25 float:left;
    26 width:160px;
    27 margin:0;
    28 padding:1em;
    29 }
    30 div.content
    31 {
    32 margin-left:190px;
    33 border-left:1px solid gray;
    34 padding:1em;
    35 }
    36 </style>
    37 </head>
    38 <body>
    39 
    40 <div class="container">
    41 
    42 <div class="header"><h1 class="header">W3School.com.cn</h1></div>
    43 
    44 <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
    45 
    46 <div class="content">
    47 <h2>Free Web Building Tutorials</h2>
    48 <p>At W3School.com.cn you will find all the Web-building tutorials you need,
    49 from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
    50 <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
    51 
    52 <div class="footer">Copyright 2008 by YingKe Investment.</div>
    53 </div>
    54 
    55 </body>
    56 </html>

7我们都知道的是，如果调整盒子中使用了float属性的图片，自然图片周围的文本会随着图片的变化而发生一些改变。看到网上有博主说在盒子模型中如果外容器使用相对定位，然后盒子中的图像使用绝对对定位，这种布局下调整图像的大小不会影响盒子中文本的变化，但是我测试了各主流浏览器后发现情况并不是这样，不建议盒子中的图像使用绝对定位，因为这样文本很可能会被覆盖隐藏一部分。![161230429175914.png][]，文本“这是一个关于float的例子”由于图片的存在被隐藏覆盖了好多。如果把文字放在标签<p></p>中进行分开处理的话会发现图片和文字的顶端不在同一水平线上![161237459952828.png][]，所以建议大家不要轻易给内容器图像加绝对定位，也不要把文字和图片分成不同的子集。个人测试总结，如有不全面的地方欢迎讨论。

浮动的应用就先写到这里，下面到了浮动的清除了~　在说清除浮动的方法之前，大家先思考一个问题：“浮动从何而来？为什么要不遗余力的清除？”大家回过头看第二段，“由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。”所以，如果一个父元素只包含浮动元素，那么他的高度就为0，如果父元素不包含任何可见背影的话，当然我们是看不到的。当存在块级元素自动扩展来适应浮动元素时，在浮动元素周围的两个段落间会出现非自然的空白转行，这就是我们所要清除浮动的原因。

关于清除 CSS的clear属性必是当仁不让。clear属性规定元素的那一侧不允许其他浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。clear属性见下表：![161301348077849.png][]有必要声明一下的是所有浏览器都支持clear属性，但是低版本的IE浏览器不支持inherit属性值，但高版本IE11就完全没有问题了~这一点和float属性相同，也算是“难兄难弟”了~

清除浮动的方法有很多，但由于跨浏览器，书写实用性等原因，性价比最高的莫过于给父级div定义 伪类:after和room了~ 为什么呢，因为IE8和非IE浏览器都支持:after,

通过添加一对空的div标签，然后再利用clear；both属性清除浮动，这样父级div就能够获取高度了　。IE的专有属性zoom可以很好的解决IE6和IE7的浮动问题。so ,建议大家使用如下代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .left{
         float: left;width: 20%;height: 200px;background: #0044DD}
            .right{
         float: right;width: 70%;height: 80px;background: #AFD400}
            .div1{background: #cc0000;border: 1px solid #000000;height: 200px}
            .div2{background: #00A5FF;border:1px solid #ff0000;height: 100px;}
        </style>
    </head>
    <body>
    <div class="div1">
        <div class="left">float left</div>>
        <div class="right">float right</div>
    </div>
    <div class="div2">The second div</div>
    </body>
    </html>

1 .clearfd:after{content:"\200B";display:block;height:0;clear:both;}
    2 .clearfd{zoom:1;}

还有一些其他的问题比如如果浮动内的元素比浮动本身宽的话，会造成浮动内的元素伸出的情况，这样的话，我们大可用overflow:hidden来隐藏多出来的部分。如果碰到3像素问题（挨着浮动元素的文本会减少3像素）这样的话我们可以直接给文本设置宽度和高度就可以避免受浮动元素的影响了。

才疏学浅，字里行间难免纰漏，如有解释的不明白或者我个人理解有错误的地方，欢迎郢正~

注：float部分代码借鉴W3school~

转载于:https://www.cnblogs.com/s-z-y/p/4427941.html

[160834387144091.png]: /images/20230808/9c0cbd087f8a46608e6a9d42402253b8.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230808/32500e63c95643cd9e227a75a284199c.png
[161230429175914.png]: https://images0.cnblogs.com/blog2015/715544/201504/161230429175914.png
[161237459952828.png]: /images/20230808/0690ed3fa5454f71bcbd10b82aceb6a4.png
[161301348077849.png]: /images/20230808/8222eac31d9c463d929a2c66a87a6035.png

发表评论取消回复

表情：

评论列表（有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读

相关如何更好利用浮动---浮动的合理利用及清除

　　CSS浮动合理利用可以带给我们很好的布局体验，但在很多时候因为元素的浮动似乎又给我们带来了很多麻烦。下面我们就来对神奇的浮动一探究竟。　　浮动是相对于CSS中的相对定位

桃扇骨/ 2023年08月17日 17:19/ 0 赞/ 87 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 248 阅读

相关浮动以及清除浮动

文章目录浮动浮动特征浮动会脱离文档浮动可以内联排列浮动会导致父元素高度坍塌

悠悠/ 2022年10月22日 15:47/ 0 赞/ 231 阅读

相关浮动的优缺点，如何清除浮动？

什么是浮动？元素浮动以后可以想做或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好

浅浅的花香味﹌/ 2022年09月25日 02:22/ 0 赞/ 108 阅读

相关浮动布局：浮动布局的特点，缺陷以及如何清除浮动

文章目录浮动布局 1. 认识浮动 2. 浮动特点 3. 浮动和inline-block 的区

末蓝、/ 2022年09月02日 13:54/ 0 赞/ 272 阅读

相关浮动与清除浮动

使用方法：只需要在需要清楚浮动的div上添加类名 class="clearfix"即可例子： <div class="someclass clearfix">

小鱼儿/ 2022年05月16日 04:26/ 0 赞/ 258 阅读

相关利用clear清除浮动的一些问题

下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: b

小鱼儿/ 2022年03月25日 03:09/ 0 赞/ 142 阅读

相关 css清除浮动好方法

1.clear:both ==>IE6,7会有高度，所以去高度需要.clear\{ clear:both; height:0px; margin:0; padding:0; w

拼搏现实的明天。/ 2021年12月24日 08:21/ 0 赞/ 231 阅读

相关浮动+清除浮动

界面布局 1.企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。 2.拿到一个很复杂的界面如何入手？从上至下布局、从

待我称王封你为后i/ 2021年10月30日 06:54/ 0 赞/ 505 阅读

相关 css为什么要清除浮动？浮动如何清除

浮动在页面中有着很大的作用，很多人在做网站的时候，都会遇到浮动的效果，但是很多人都不知道css为什么要清除浮动？以及浮动如何清除？下面我们来了解一下。

红太狼/ 2021年01月28日 16:38/ 0 赞/ 799 阅读