CSS笔记——浮动和布局/清除浮动

视频地址

一、传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子。用盒子进行排序

1. 普通流（标准流）
2. 浮动
3. 定位

标准流（普通流，文档流）

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

1. 块级元素会独占一行，从上向下顺序排列。常用元素有：div,hr,p,h1-h6,ul,ol,dl,form,table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span,a,i,em等

标准流是最基本的布局方式

实际开发中，一个页面基本包含了三种布局方式。

二、浮动

为什么需要浮动？浮动可以改变元素标签默认的排列方式。

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

网页布局第一准则：先设置盒子大小，再设置盒子浮动

float

left/right/none

浮动特性：

1. 浮动的元素会脱离标准流。
2. 浮动的元素会一行内显示并且元素顶部对齐，浮动元素紧贴在一起，如果父级宽度装不下这些盒子，多出的盒子会另起一行对齐。
3. 浮动的元素会具有行内块元素的特性，任何元素都可以浮动，添加浮动之后具有行内块元素相似的特性

一、设置了浮动元素最重要特性：

1. 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
2. 浮动的盒子不再保留原先的位置、

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

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

先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

显示效果

三、布局

效果

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

清除浮动

clear

left/right/both

 

清除浮动方法

a.额外标签法

额外标签法也称为隔墙法。

在浮动元素的末尾添加一个空标签。此标签必须为块级元素。

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

• 添加了许多无意义标签，结构优化较差

b.父级添加overflow

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit

• 代码简洁，无法显示溢出的部分

c.:after 伪元素法

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器
• 代表网站：百度，淘宝，网易

d.双伪元素清除浮动

        .clearfix:before,.clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }

• 优缺点同上
• 代表网站：腾讯，小米等