对于浮动以及清除浮动方法的理解及总结

最新推荐文章于 2024-03-01 14:09:09 发布
最新推荐文章于 2024-03-01 14:09:09 发布
阅读量464 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ty987654/article/details/77868315
版权

浮动是指元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
通过float属性实现元素的浮动。
一：浮动的影响：
1. 浮动元素会自动设置为块级元素，相当于给元素设置了display:block，而行内元素则不可以。

<style>
        .div1,.div2{
            width:200px;
            height:200px;
        }
        .div1 span{
            width:100px;
            height:100px;
            background:#fcc;
            margin:5px;
            float:left;
        }
        .div2 span{
            width:100px;
            height:100px;
            background:#fcc;
        }
    </style>
<body>
<div class="wrap">
     <div class="div1">
        <span>行内元素span通过浮动成为块级元素</span>
    </div>
    <div class="div2">
        <span>行内元素span未浮动</span>
    </div>
</div>
</body>

这里写图片描述
行内元素span通过浮动设置成为块级元素，可以设置宽和高。
未浮动的行内元素设置宽和高无效。

2 浮动元素后的非浮动元素
浮动元素后的非浮动块级元素在定位后会产生重叠，且背景位于浮动元素之下，但内容并不位于浮动元素之下。
浮动元素后的非浮动行内元素在定位后会发生重叠，且背景，文字位于浮动元素之上。

 <style>
       .wrap{
           width:400px;
           height:300px;
           border:1px solid #aaa;
       }
       .div1{
           width:200px;
           height:200px;
           background:#fcc;
           float:left;
       }
        .div2{
            width:300px;
            height:100px;
            background:#eee;
        }
        .span{
           background:#f44;
           margin-left:-50px;
        }
    </style>
<body>
<div class="wrap">
    <div class="div1">浮动元素div</div>
    <div class="div2">跟在浮动元素后的div</div>
    <span class="span">跟在浮动元素后的div</span>
</div>
</body>

这里写图片描述

3 多个浮动元素，高度一致时，使用流式排列

 <style>
        .wrap{
           width:400px;
           height:300px;
           border:1px solid #aaa;
        }
        .wrap div{
            float:left;
            width:100px;
            height:100px;
            background:#fdd;
            margin:10px;
        }
    </style>
    <div class="wrap">
        <div>浮动div1</div>
        <div>浮动div2</div>
        <div>浮动div3</div>
        <div>浮动div4</div>
        <div>浮动div5</div>
    </div>

这里写图片描述

多个浮动元素，高度不一致时，会出现如下情况：

<style>
        .wrap{
           width:400px;
           height:300px;
           border:1px solid #aaa;
        }
        .wrap div{
            float:left;
            width:100px;
            background:#fdd;
            margin:10px;
        }
    </style>
    <div class="wrap">
        <div style="height:100px">浮动div1</div>
        <div style="height:200px">浮动div2</div>
        <div style="height:50px">浮动div3</div>
        <div style="height:100px">浮动div4</div>
        <div style="height:50px">浮动div5</div>
    </div>

这里写图片描述
在浮动div4的时候，出现换行，但这次换行并不是从行头开始，而是从浮动div2开始。

二：清除浮动的方法
多个块级元素，在浮动之前，在文档流中是竖向排列的；浮动之后可以理解为横向排列。
1. 使用clear清除浮动
清除浮动的关键是：clear none|left|right|both
none: 默认值。允许两边都可以有浮动元素。
left: 不允许左边有浮动元素。
right: 不允许右边有浮动元素。
both: 不允许有浮动对象。
css中，用clear清除浮动时，牢记：clear清除浮动只能影响元素本身，不能影响其他元素。

 <style>
        div{
            width:100px;
            height:100px;
            float:left;
        }
        .div1{
            background:#f11;
        }
        .div2{
            background:#fcc;
        }
  </style>
  <div class="div1">div1</div>
  <div class="div2">div2</div>

这里写图片描述
如果想要div2移到div1下面，在div2中加入clear:left。
并不能在div1中加入clear:right，因为clear只会影响元素本身，不会影响其他元素。

2. 使用overflow属性清除浮动
找到浮动元素的父元素，为父元素添加属性：overflow:hidden。
overflow:hidden就是清除这个父元素中的子元素浮动对页面产生的影响。
overflow：hidden有一个特点：如果父元素的宽度和高度固定，子元素超出父元素的区域会被隐藏。
示例：

 <style>
        div{
            width:150px;
            border:2px solid #f00;
        }
        .div1{
            width:100px;
            height:200px;
            border:2px solid #fcc;
            float:left;
        }
 </style>
 <div>
    <div class="div1"></div>
 </div>

这里写图片描述
修改后：

  div{
      width:150px;
      border:2px solid #f00;
      overflow:hidden;  //父元素添加overflow:hidden属性
     }

这里写图片描述

3. 添加一个空标签
这种方式是在需要清除浮动的父级元素内部的所有浮动元素的后面添加一个空标签，并未这个空标签添加clear:both属性。
弊端：增加了无意义的标签元素，使html结构变得混乱。
示例：

 <style>
        .wrap{
            width:300px;
            border:3px solid #f00;
        }
        .left{
            float:left;
            width:100px;
            height:200px;
            border:2px solid #fcc;
        }
        .right{
            float:right;
            width:100px;
            height:200px;
            border:2px solid #aaa;
        }
  </style>
  <div class="wrap">
      <div class="left"></div>
      <div class="right"></div>
  </div>

这里写图片描述
修改后：

<style>
        .wrap{
            width:300px;
            border:3px solid #f00;
        }
        .left{
            float:left;
            width:100px;
            height:200px;
            border:2px solid #fcc;
        }
        .right{
            float:right;
            width:100px;
            height:200px;
            border:2px solid #aaa;
        }
        .clear{
            clear:both;
        }
  </style>
  <div class="wrap">
      <div class="left"></div>
      <div class="right"></div>
      <div class="clear"></div>
  </div>

这里写图片描述

4. 使用css的after伪元素
为浮动元素的父元素添加类名clearfix (class=”clearfix”)，然后给class
添加 :after伪元素就会实现父元素末尾添加一个看不见的块元素来清理浮动。
示例：

  <style>
        .wrap{
            width:300px;
            border:3px solid #f00;
        }
        .left{
            float:left;
            width:100px;
            height:200px;
            border:2px solid #fcc;
        }
        .right{
            float:right;
            width:100px;
            height:200px;
            border:2px solid #aaa;
        }
  </style>
  <div class="wrap">
      <div class="left"></div>
      <div class="right"></div>
  </div>

这里写图片描述
修改后：

 <style>
        .wrap{
            width:300px;
            border:3px solid #f00;
        }
        .left{
            float:left;
            width:100px;
            height:200px;
            border:2px solid #fcc;
        }
        .right{
            float:right;
            width:100px;
            height:200px;
            border:2px solid #aaa;
        }
        .clearfix:after{
            content:".";
            height:0;
            display:block;
            visibility:hidden;
            clear:both;
        }
  </style>
  <div class="wrap clearfix">
      <div class="left"></div>
      <div class="right"></div>
  </div>

这里写图片描述

总结：
清除浮动的方法一般就是这四种，至于其他的方法并不在这里总结。
不过一般来说，最常用的是前两种方法，clear和overflow:hidden。
clear的使用规则：clear属性只会影响元素本身，不会影响其他元素。
overflow的使用原则：寻找浮动元素的父元素，为父元素添加overflow:hidden。

@119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动方法总结
09-25
在CSS布局中，浮动元素（float）经常用于创建多列布局或者使文本环绕图像。然而，浮动元素的一个副作用是它们可能会导致父元素高度塌陷，也...但在支持老版本浏览器的场景下，理解并掌握清除浮动的方法仍然非常重要。
清除浮动的4种方式
热门推荐
田兴的博客
07-27 5万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 当我给内部两个盒子加上float属性的时候 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法（最常用的4种） 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点： 通俗易懂，书写方便。（
XML常见问题总结
萧十一郎博客
10-09 1453
八、XML部分 1、xml有哪些解析技术?区别是什么? 有DOM,SAX,STAX等 DOM:处理大型文件时其性能下降的非常厉害。这个问题是由DOM的树结构所造成的，这种结构占用的内存较多，而且DOM必须在解析文件之前把整个文档装入内存,适合对XML的随机访问。 SAX:不现于DOM,SAX是事件驱动型的XML解析方式。它顺序读取XML文件，不需要一次全部装载整个文件。当遇到像
清除浮动的五种常用的方法（ 解决方法 详细解释 原理 产生原因 ）
zhp19513507633的博客
07-20 4981
清除浮动的五种常用的方法（ 解决方法 详细解释 原理 产生原因 ）
RTK中浮点解、固定解的区别
Kunfly的博客
01-13 2万+
1.RTK固定解（fix） 简言之，拥有固定解意味着解算出了正确的解。在常规条件下，你拥有了1~3cm的测量精度。 2.RTK浮点解（float） 在Float解决方案中，该算法尚未得到固定解(fix)。由于没有固定解（fix），因此提供了一种Float解决方案，它的位置始终比固定(fix)解决方案的精度低，通常不能用于厘米精度的测量。 ...
单点解、浮动解和固定解的区别与联系
最新发布
weixin_45875986的博客
03-01 1344
浮动解——移动站接收机使用差分改正信息计算的当前相对坐标。但对于浮点解来讲，相位的整周模糊度参数未能固定为一整数，而是用浮点的估值来替代它。不建议在此情况下测点。固定解——在 RTK 模式下，整周模糊度参数固定后，移动站接收机计算的当前相对坐标。达到固定解后即可开始测量。单点解——接收机未使用任何差分改正信息计算的3D 坐标。
CSS教程：总结清除浮动的方法
09-27
浮动和清除浮动是CSS布局中的核心概念，尤其是在创建复杂的网页布局时。浮动元素允许内容环绕在元素周围，常用于创建多列布局或调整元素位置。...理解并掌握这些方法对于任何Web开发者来说都是至关重要的。
DIV+CSS 清除浮动常用方法总结
09-24
【标题】：深入理解CSS清除浮动的三种常见方法 【描述】：在Web开发中，CSS浮动布局常常用于创建复杂的页面结构，但随之而来的是可能导致的父元素高度塌陷问题。为了解决这一问题，开发者通常会采取清除浮动的策略...
清除css浮动的三种方法小结
09-24
本文将总结三种清除浮动的方法。 首先，理解浮动的目的至关重要。浮动元素会脱离标准文档流，允许其他非浮动元素在它旁边排列，而不是在其下方。例如，当两个`div`元素分别设置为左浮动和右浮动时，它们会并排显示...
浮动及清除浮动
weixin_68485297的博客
04-06 1329
一、浮动 1、float： 用于浮动 left 元素向左浮动 right 元素向右浮动 non 默认值，元素不浮动 ①div盒子不加浮动，作为块级元素占据整行，文字会自动换行。 ②div盒子加了左浮动，float：left；呈现出一种文字环绕盒子的效果。 两种结果，见下图： 二、消除浮动 我们又感受到浮动的好处，但同样的使用了浮动以后一会造成一些影响，会造成父级高度塌陷。 解决父级边框塌陷的方法： 下图的蓝色和粉色盒子都给了100px的宽高，外面包裹的盒子只给了一个宽300p
清除浮动（详解）
wwwjjjjj666的博客
12-06 2650
清除浮动（详解）
前端必知：13.浮动的使用与清浮动
qq_52799985的博客
07-12 688
防止ie低版本具有默认高度height: 0;
记：安卓上的行内元素清除浮动失效
weixin_34061482的博客
04-11 87
首先说明一下，我所使用的清除浮动的方法如下： .clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;} .clearfix{*zoom:1;}这个我就不多讲了；直接上代码说问题 CSS： a{/*display:block;*/}/*此时a标签一定要设为块元素，不然错乱*/.f...
float（对块级，行内，内联块元素的影响），如何清除浮动
侯阮悦的博客
08-05 1283
浮动的影响 浮动会使块级元素和内联元素具有内联块元素的特点，块元素可以一行显示，内联元素可以设置宽高。 使得元素脱离文档流，按照浮动的方向移动，遇到父级边界或者相邻浮动元素停住：float：left / right / none，子元素脱离文档流，结果会使父元素高度崩塌 清除浮动 1.为父元素设置高度 优点：兼容性好 缺点：高度未知，可能会导致子元素换行 2.ov...
浮动元素的性质和清除浮动的方法
wtyzky的博客
07-30 303
浮动元素的性质和清除浮动的方法 一浮动元素的性质 1、浮动的元素会脱离标准文档流，具有行块二象性（既具有行内元素的性质，也具有块级元素的性质），比如span元素浮动之后，可以直接设置宽高，不需要再转块。 css中有三种方法可以让元素脱离标准文档流。①浮动②绝对定位③固定定位 2、浮动的元素会有字围现象，文字会围绕着浮动的元素。 3、竖直方向上的margin塌陷现象消失。 二浮动元素会带来的影响 1...
浮动和清除浮动
weixin_47267628的博客
12-29 653
浮动float 浮动的概念 有很多的布局效果，标准流没有不能完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 浮动float float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法： 选择器 { float : 属性值; } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动 浮动特性（重难
css基础———清除浮动的一些方法及区别
luck_lin
12-15 861
为什么要清楚浮动？ 地址：http://blog.csdn.net/qwe502763576/article/details/78811658 清除浮动方法概览 这里例举四种常见的清除浮动方式： 　　方式一:使用overflow属性来清除浮动 　　　　.ovh{ 　　　　　　overflow:hidden; 　　　　　}
浮动以及清楚浮动的几种方法
M_emory_的博客
04-01 1788
浮动以及清楚浮动的几种方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值