CSS随笔

一、浮动(float)

网页布局的本质---用CSS来摆放盒子，把盒子放到相应位置

　　　　　　{1.标准流（最基本的布局网络的方式）

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

　　　　　　2.定位

　　　　　　3.浮动}

1.格式：float:left/right

2.浮动特性(point)

(1)脱离标准流,俗称脱标

(2)浮动的盒子不再保留原先的位置(p173还有30秒没看)

二、常见网页布局

1.标准流盒子、左右盒子

2.浮动布局注意点

（1）浮动和标准流的父盒子搭配

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

（2）一个元素浮动了，理论上其余兄弟也要浮动

①一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

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

三、清除浮动

由于父盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

1.额外标签法

2.父级overflow

3.父级after伪元素

4.父级双伪元素

四、PS切图

五、学成在线案例