P8、CSS基础_display与浮动

一、回顾元素分类：

1. 块级元素
   h1~h6 、p、div、列表……
2. 行内元素
   span、a、img、strong……
   块级元素可以包含行内元素，但行内元素不能包含块级元素

二、 display

1. display：block 将行内元素 转换为块元素
2. display：inline 将块元素转换为行内元素
3. display：inline-block 既保持块元素特性又能不独占一行（常用）
4. display：none 消失内容
   display常用于制作导航刊

三、 浮动float

1. 左右浮动
   float:left
   float:right

拓展：
clear标签-既可以浮动又可以像标准文本流排列
1、 clear：right 右侧不允许出现浮动
2、clear：left 左侧不允许出现浮动（有的话自动换行排列）
3、clear：both 两侧不允许出现浮动
4、clear：none可以浮动

四、解决浮动后父级边框塌陷问题

当边框里元素浮动后边框会塌陷如图所示：

因此有四种方法解决塌陷问题

一、最简单笨方法

将边框大小高于所有浮动元素大小
解释：增加父级元素的高度

二、增加空div

通过增加一个空的div标签后，div盒子数据初始化为0，然后清除浮动：clear：both

三、overflow标签

在父级元素中增加一个overflow：hidden；
拓展：overflow-scroll 增加一个下拉小窗口带滑动条

四、父级中添加一个伪类：after（市场常用）

固定写法：
#father:after{
content:’’;
display:block;
clear:both;
}

五、小结

1. 设置父级元素的高度
   简单、但元素新添加固定的高度，就会被限制
2. 浮动元素后面增加空div
   简单、但代码中尽量避免出现空div
3. overflow
   简单、但有下拉的一些场景避免使用
4. 父类中添加一个伪类：after（推荐）
   写法稍微复杂，但没有副作用

对比display与 float

display
方向不可控制
float
浮动起来会脱离标准文本流，需要解决父级塌陷问题