css浮动（float）

css浮动（float）

1.传统网页布局的三种方式

     普通流（标准流）

     浮动

     定位

2.标准流

     标签按照规定好默认方式排列

          （1）块级元素会独占一行，从上向下顺序排列

                   常用元素：div、hr、p、h、ul、ol、dl、form、table

          （2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行

                   常用元素：span、a、i、em等

     以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式 ）

3.浮动float

     有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认排列方式（浮动可以让多个块级元素一行显示）

     网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列赵浮动

4.什么是浮动

     float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

     语法

  选择器{ float:属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

5.浮动的特性

     （1）浮动元素会脱立标准流（脱标），浮动的盒子不再保留原先的位置

     （2）浮动的元素会一行内显示并且元素顶部对齐

     （3）浮动的元素会具有行内块元素的特性

     任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

     如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来决定

6.清除浮动

原因：浮动元素都有一个标准流的父元素，他们有一个共同的特点，都是有高度的

理想中的状态，让子盒子撑开父亲，有多少孩子父盒子就有多高

但是不给父盒子高度会有问题，出现父级塌陷

     6.1清除浮动的本质

• 清除浮动的本质就是清除浮动元素造成的影响
• 如果父盒子有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

语法

 选择器{ clear:属性值; }

属性值	描述
left	不允许左侧有浮动元素：清除左侧浮动的影响
right	不允许右侧有浮动元素：清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只采用，both清除浮动

清除浮动的策略就是：闭合浮动

6.2清除浮动的方法

（1）额外标签法也称为隔墙法，是w3c推荐的做法

额外标签法会在浮动元素末尾添加一个空的标签。例如

 <div  style="clear:both"></div>

或者其他标签，这样就会像一堵墙一样，将浮动的元素和外部元素隔开，不会造成父级塌陷（注意；新添加的元素必须是块级元素）

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化差

（2）父级添加overflow属性

可以给父元素添加overflow属性，将其属性设置为hidden、auto或scroll

优点：代码简洁

缺点：无法显示溢出的部分

（3）父级添加after伪元素

after方法是额外标签法的升级版，也是给父元素添加

  .clearfix:after {
             content: "";
             display: block;
             height: 0;
             clear: both;
             visibility: hidden;
        }
         .clearfix {
            *zoom:1;
        }

优点：没有增加标签，结构简单，需要给父元素清除浮动的时候，直接给父元素加上这个类就行

缺点：照顾低版本浏览器

代表网站：百度、淘宝、网易

（3）父级添加双伪元素

也是给父元素添加

  .clearfix:after,.clearfix:before {
             content: "";
             display: table ;
             clear: both;
        }
         .clearfix:after {
             clear: both;
        }
         .clearfix {
            *zoom:1;
        }

优点：没有增加标签，结构简单，需要给父元素清除浮动的时候，直接给父元素加上这个类就行

缺点：照顾低版本浏览器

代表网站：小米