3、CSS盒子模型，float和clear属性

（一）盒子模型

盒子：能存放内容的标记都是盒子，最大的盒子是HTML

• 边界（margin）：盒子外面叫边界，有上下左右4个边界；
• 填充（padding）：盒子里面叫填充，有上下左右4个填充；
• 边框（border）：盒子本身有边框，有上下左右4个边框。

（二）float属性（浮动属性）：将块显示标记左右排列

• 改变块元素（block element）对象的默认显示方式；
• 浮动元素（float）会被移出标准流，但是不脱离文件流；

 

 

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

（三）clear属性（清除浮动的影响）

浮动的元素会影响到标准流中的元素所以要对受浮动影响的元素进行清除浮动的影响

注：

clear是清除浮动，但是在清除浮动的时候清除了当前盒子边界的水性，使用了clear属性的盒子无法使用margin属性。