浮动

一.脱标的三种方式

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

二.浮动

1.设置浮动

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

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

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

浮动的四大特性：

1.浮动的元素脱标

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

2.浮动的元素互相贴靠

　　如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
　　如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

3.浮动的元素有"字围"效果

　　所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

4.收缩的效果

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

2.清除浮动

为什么要清除浮动？

在开发中，为了提高开发效率，更好修改页面布局，在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。

看一个效果：

html效果：

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

 </div>

  <div class="father2"></div>

css样式：

 *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子一般不设置高度*/

            /*出现这种问题，我们要清除浮动带来影响*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。

浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动

清除浮动的四种方法：

　　1.给父盒子设置高度

　　　　使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

　　2.clear:both 内墙法清除别人对我的浮动影响

　　　　有三个值：

　　　　　　left：当前元素左边不允许有浮动元素

　　　　　　right：当前元素右边不允许有浮动元素

　　　　　　both：当前元素左右两边不允许有浮动元素

　　　　　　给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

　　3.伪元素清除法（常用）

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

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

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

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

　　4.overflow：hidden

overflow属性规定当内容溢出元素框时发生的事情。

说明：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

有五个值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

逐渐演变成overflow：hidden清除法。

其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522