【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.css布局三种机制

2.css浮动

3.css浮动特点

4.css清除浮动

1.css布局三种机制

三种机制 -- 普通流（标准流） 浮动 定位

普通流

    块级元素：独占一行

    行内元素：不独占一行
 

块级元素会独占一行，从上向下排列
常见的块级标签：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span、a、i、em等

2.为什么需要浮动

网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。

举例子：

前面学过行内块，行内块可以一排显示；但是中间会有缝隙，所以不能满足我们的开发需求。

3.认识浮动

 

 

选择器{float:属性值;} 值：none(没有) left(左浮动) right(右浮动)

 

4.浮动的特点：
 

浮动特点1 --- 脱离标准流，不占位置（自己原来的位置漏给后面的标流）
浮动特点2 --- 浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
浮动特点3 -- 任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

 

5.清除浮动
 

清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。
如果子盒子是标流，因为标流占有位置，所以父亲能检测到高度。

子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。

清除浮动的本质

清除前面的盒子设置浮动后，带给后面盒子的影响。 

 

语法规则

选择器{
    clear:属性值
}

    div{
      clear: left;
   }
 

    属性值

 

•         left:清除左侧浮动的影响
•         right:清除右侧浮动的影响
•         both:同事清除左右两侧浮动的影响
   

---