1 浮动相关知识
float属性的取值:
- left:元素向左浮动。
- right:元素向右浮动。
- none:默认值。元素不浮动,并会显示在其在文本中出现的位置。
浮动的特性:
- 浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。
- 不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。
浮动元素的展示在不同情况下会有不同的规则:
-
浮动元素在浮动的时候,其margin不会超过包含块的padding。PS:如果想要元素超出,可以设置margin属性
-
如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
-
如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
-
如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。
-
如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐
重叠问题:
- 行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
- 块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上
clear属性:
clear属性:确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。 取值:left、right、both