CSS布局基础

一、CSS布局相关属性

1、float：该属性控制目标HTML组件是否浮动以及如何浮动。当通过该属性设置某个对象浮动后，该对象将被当作块组件处理。浮动HTML组件将会漂浮紧紧跟随它的前一个组件，直到遇到边框、padding、margin、或另一个块级元素为止。（该属性支持两个属性值：left、right。float：left（向左浮动）、float：right（向右浮动））

2、clear：该属性用于设置HTML组件的左右是否允许出现浮动现象。

该属性支持如下属性值：

（1）none：默认值。两边都允许出现浮动组件

（2）left：不允许左边出现浮动组件

（3）right：不允许右边出现浮动组件

（4）both：两边都不允许出现浮动组件

3、clip：该属性控制对HTML元素进行裁剪。该属性值可以指定为auto（不裁剪）或rect（number  number  number  number），其中rect（）用于在目标组件上定义一个矩形，目标组件只有位于该矩形区域内才会被显示出来。

4-1、overflow：设置当HTML组件不够容纳内容时的显示方式。

该属性支持如下几个属性值：

（1）visible：该属性指定HTML组件既不剪切内容也不添加滚动条。这是默认值

（2）auto：该属性指定当HTML组件不够容纳内容时将自动添加滚动条

（3）hidden：该属性指定HTML组件自动裁剪那些不够空间显示的内容

（4）scroll：该属性指定HTML组件总是显示滚动条

4-2、overflow-x：该属性的作用与overflow相似，只是该属性只控制水平方向的显示方式

4-3、overflow-y：该属性的作用与overflow相似，只是该属性只控制垂直方向的显示方式

5、visibility：适用于CSS2，用于设置目标对象是否显示。与display不同，当通过该属性隐藏某个HTML元素后，该元素占用的页面空间依然会保留，该属性常用的两个属性值为：visible和hidden，分别用于控制目标对象的显示和隐藏。

6、display：用于设置目标对象是否以及如何显示。

二、浮动

（1）浮动的基础：

a、脱离文档，使围绕该元素的内容重新布局

b、浮动后为块级元素

c、浮动后包含在父级元素的内容区，不会穿过padding

（2）浮动的行为：

a、必须在父级元素的顶部内容区域之内

b、不能比在它之前的同级兄弟块级元素高

c、不能比之前的浮动元素高

d、一般是影响后面的兄弟元素或父级元素的后面的兄弟元素