关于前端:本节介绍的是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;
            }