浮动

标准文档流

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

块元素：块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

left和right的区别？

left元素向左浮动。right元素向右浮动。定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

none：允许两边都可以有浮动对象；

both：不允许有浮动对象;

left：不允许左边有浮动对象;

right：不允许右边有浮动对象。

解决父级边框塌陷的4种方法分别是什么，各自的使用场景是什么？

1、给父级元素添加一个高度；
不推荐这种方法。高度无法确定，一次次地试高度很麻烦，何况不能从本质上解决问题。
2、在最后一个子元素后加一个空的div，给他添加样式clear，清除两侧浮动；
这种方法也很有效，但是加了一个空的div，造成代码的冗余。
3、父级元素添加overflow：hidden；
overflow是溢出管理的意思，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来。

标准文档流组成

块级元素（block）

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

 

 

display属性 

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

 

 

display特性

块级元素与行级元素的转变（block、inline）
控制块元素排到一行 (inline-block)
控制元素的显示和隐藏(none)

块元素排在一行的方法

可以使用什么属性使块元素排在一行？
inline-block
float

浮动

float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

                                                                                                                                                  

 

 

边框塌陷

layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？
1、浮动元素脱离标准文档流
2、清除浮动

清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

 

 

 清除左右浮动

依次清除文本的左右浮动

清除两测浮动

 

inline-block和float的区别display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式