清除浮动

Posted 2021-01-07 gyh412724

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

1. float：表示浮动的意思。它有四个值。

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

　　看一个例子

　　　　html结构：

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飞学城</span>
css样式
.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

　　我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。

　　那么浮动如果大家想学好，一定要知道它的四大特性

　　　　　　　　1.浮动的元素脱标

　　　　　　　　2.浮动的元素互相贴靠

　　　　　　　　3.浮动的元素由"子围"效果

　　　　　　　　4.收缩的效果

浮动元素脱标

<div class="box1">小红</div>
     <div class="box2">小黄</div>
     <span>小马哥</span>
     <span>小马哥</span>

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

　　效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。

　　原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

　　原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

浮动元素互相贴靠

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

浮动元素字围效果:

浮动元素紧凑效果

　　收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，

2. 为什么要清除浮动

　　还好还好。我们有多种清除浮动的方法，在这里给大家介绍四种：

1. 1. 给父盒子设置高度
   2. clear:both
   3. 伪元素清除法
   4. overflow：hidden

　　给父盒子设置高度:

　　　　这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

　　伪元素清除法:

　　　　给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after{ 
/*必须要写这三句话*/
 content: ‘.‘;
 clear: both; 
display: block; }

　　　　新浪首页推荐伪元素清除法的写法

/*新浪首页清除浮动伪元素方法*/ 
content: ".";
 display: block;
 height: 0; clear: both;
 visibility: hidden

 bfc:          https://blog.csdn.net/riddle1981/article/details/52126522