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

最新推荐文章于 2024-07-09 22:55:28 发布

@119

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量465

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ty987654/article/details/77868315

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浮动是指元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
通过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。