css浮动

浮动

传统网页布局的三种方式

网页布局的本质—用css来摆放盒子。

css提供了三种传统布局方式（盒子的排列顺序）：

标准流、浮动、定位

实际开发中一个页面都包含了这三种布局方式。

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

1. 块级元素独占一行，从上向下排列

• 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

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

• 常用元素：spam、a、i、em等

浮动

选择器{float:none | left | right;}

默认不浮动 | 向左浮动 |向右浮动

什么是浮动

创建浮动后会将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

为什么需要浮动

浮动最典型的应用：多个块级元素一行内排列显示

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

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

浮动的特性

1. 脱离标准普通流的控制（浮）移动到指定位置（动），即脱标；

2. 浮动的盒子不再保留原先的位置；

3. 多个盒子都设置浮动，它们会按照属性值一行内显示并且顶端对齐排列；

4. 浮动元素具有行内块元素的特性。

   • 如果块级盒子没有设置宽度，默认宽度和父级一样，但是添加浮动后，它的大小根据内容来决定；
   • 浮动盒子中间没有空隙
   • 行内元素同理

浮动元素经常和标准流父级搭配使用

为了约束浮动元素的位置，网页布局一般采用：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

demo

常见网页布局

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            margin: 10px auto;
            background-color: pink;
        }

        .box li {
            width: 237px;
            height: 300px;
            background-color: gray;
            float: left;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0px;
        }

        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }

    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>

浮动布局注意点

1. 浮动和标准流的父盒子搭配
2. 一个元素浮动了，理论上其余的兄弟也要浮动，以防出现问题
3. 浮动的盒子不会有外边距合并问题
4. 浮动的盒子不会压住下面标准流的文字与图片

浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流

清除浮动

为什么清除浮动

理想中的状态，让子盒子撑开父盒子，有多少孩子，父盒子就有多高。但是浮动撑不开盒子。

• 父级没高度
• 子盒子浮动
• 影响下面的布局

清除浮动的本质

选择器{clear：left | right | both};

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

清除浮动

策略为：闭合浮动

1. 额外标签法：在浮动元素末尾添加一个块级空标签（不推荐）

    .clear {
        clear: both;
    }

        <div class="clear"></div>

在浮动元素末尾添加一个空标签，调用该类（隔墙法）

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

2. 给父级添加overflow属性，将属性值设置为hidden、auto或scroll

• 优点：代码简洁
• 缺点：无法显示溢出部分

3. :after伪元素法

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

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

    .clearfix {
        /*IE6、7专有*/
        *zoom: 1;
    }

直接调用.clearfix即可，大厂常用

相当于用css创建了一个盒子在最后，使浮动闭合

4. 双伪元素清除浮动

将前后都堵上，给父元素添加

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

• 优点：代码更简洁
• 缺点：需要照顾低版本浏览器