关于前端:本节介绍的是css浮动的定义性质作用问题清除浮动

本节介绍的是 css 浮动的定义，性质，作用，问题，革除浮动

1. 浮动的定义
2. 浮动的性质
3. 浮动的理论案例作用
4. 浮动的问题及解决

1. 浮动的定义

概念：浮动就是让元素能够 向左或向右挪动 ，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不论它有没有设置浮动，都会 紧挨着上一个元素 )
浮动：布局属性的一种
属性名：float
属性值：left、right
作用：让元素脱离规范流，同级的浮动元素会并成一排排列显示，并且触发 bfc 属性。

2. 浮动的性质

1. 脱离规范流:
元素设置了浮动会脱离规范流限度，能够给浮动元素 设置宽高 ，不设置宽高则有 内容撑开 ，且 并排一行 ，不会呈现空白折叠景象
留神：浮动没有居中对齐，只能左对齐或者右对齐

2. 浮动元素顺次贴边：
父级元素 宽度足够 时，子级元素会 依照 HTML 的书写程序向左 / 右进行贴边 ，如果父级 宽度不够 时，子级会主动换行向左 / 右进行贴边，直到贴到父级或者子级元素的边框为止

宽度足够时:

宽度不够时：

3. 浮动的理论案例作用

1、利用浮动制作导航条
操作：利用左右浮动让其对应对齐

            *{
                margin: 0;
                padding: 0;
            }  
            ul{
                margin: 100px auto;
                width: 600px;
                height: 100px;
                box-shadow: 0 0 5px 10px pink;
            }
            li{
                list-style: none;
                width: 100px;
                height: 100px;
                border: 1px solid red;
                float: left;
                text-align: center;
                line-height: 100px;
            }
            ul .right{float: right;}

代码片段
2、触发 bfc 解决 margin 塌陷问题
3、字围景象

            *{
                margin: 0;
                padding: 0;
            }  
            ul{
                margin: 100px auto;
                width: 200px;
                height: 400px;
                box-shadow: 0 0 5px 10px pink;
            }
            li{
                list-style: none;
                width: 100px;
                height: 100px;
                border: 1px solid red;
                float: left;
                text-align: center;
                line-height: 100px;
            }

代码片段

4. 浮动问题及解决

问题：设置浮动的元素是无奈撑开规范流元素的高度
解决：给父元素设置高度或者 革除浮动、增加 overflow：hidden 属性

革除浮动：

用 clear 属性革除元素本身受到后面浮动元素的影响，给规范流父元素增加 clear 属性后 父元素就不会受到浮动影响，不会占有浮动让出的地位。
属性名：clear
属性值：left、right、both

利用伪类革除浮动：
原理：利用 css 代码中用伪类办法减少一堵墙让其撑开
伪类选择器：通过选中标签增加伪类，选中标签的状态或地位

    div{
         clear: both;
         content:"";
         display: block;
            }