CSS浮动

——B站黑马课程 

---

一、结构伪类选择器

 第三个全能。

 二、伪元素

伪元素：使用css创建标签（例如网页中不重要的小图）。

 找父级，在父级里面创建子级标签。

 默认是行内，添加宽高背景需要转成行内块或块。

通过添加伪元素，文本中原本只有“爱”，最后文字却是“老鼠爱大米” 。中文需要用英文引号标记。

三、标准流

换行或者不换行。 

四、浮动

       

两个div如果想实现相邻紧挨的效果需要将div转成行内块，但是此时div换行默认会产生间距。考虑到可读性无法将所有div写在一行。即浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格距离。 为了解决这个问题，引入浮动。

two是right的情况。

  two是浮动left，且两个div是换行写的的情况。

浮动特点：

one添加浮动效果

但是two中文字没有被覆盖（半覆盖）。

 one和two都浮动，此时效果。浮动的标签是顶部对齐的。不想顶对齐则添加margin边距。

浮动：在一行排列，且宽高生效。浮动后的标签具有行内块特点。

 浮动后的标签无法居中。

综合案例1：

 

 橙div和蓝div需要有个大div容器（绿）。

CSS推荐书写顺序：浏览器执行效率更高

1. 浮动 或者 display

2. 盒子模型：margin border padding 宽高背景色

3. 文字样式 

 综合案例2：

此时效果如图：

 

去掉无关背景颜色。

注意：如果父级宽度不够，子级会自动换行。无法浮动上去。

 

 综合案例3：

 (案例)网页导航案例

需求：使用浮动，完成设计图中页面布局。

 主导航nav，必须是li嵌套a的情况。

 

先去掉圆点，再把块元素li进行浮动得到效果 

 <a>的触发范围大于<li>, 超链接在没有要求的情况下放在a标签上。a范围是整个框，li是文字。

此时转成行内块和块都可以，因为li已经浮动，可以在一行。 

 

 五、清除浮动

 去掉粉色（父级）的高度后：

 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受到影响，显示到上面的位置。

 

 

 clear:both用于清除左右两侧浮动的影响。

 

  

 

转成table就不是父子级了，就不存在塌陷问题了。

外边距塌陷问题/浮动问题都可以调用上述代码解决。

  父级添加hidden就可。