1. 图片下方会产生几像素的空白

代码：

// html
<div class="zls"><img src="../imgs/zls.jpg" />
</div>
// css
.zls {border: 1px solid #f00
}
.zls img {width: 200px;height: 200px;
}

显示结果如下所示：在div包裹的img中，img下面会产生几像素的空白，原因是img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符

解决办法：

1. 设置img样式为 `vertical-align: middle;` 或者 `display: block;`
2. 设置父级元素为`display: flex;`

2. 超链接的颜色设置顺序

a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f00;}
a:active{color:#ccc;}

速记：LOVE、HATE

3. 让超出部分文本显示为省略号

 .test {width: 50px;height: 50px;
}
.test {// 添加如下代码 white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

4. 浮动

参考：

1. https://www.zhangxinxu.com/wordpress/2010/01/css-float%e6%b5%ae%e5%8a%a8%e7%9a%84%e6%b7%b1%e5%85%a5%e7%a0%94%e7%a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%b8%80/

2. https://www.w3school.com.cn/css/css_positioning_floating.asp

• 浮动的原始意义：只是用来让文字环绕图片而已，仅此而已。
• 浮动的本质：包裹与破坏。浮动（无论左浮还是右浮）某种意义与 `display: inline-block;`属性的作用一样，差别在于float有左右的区分。
• 浮动的框可以左移或者右移，直到外边缘遇到包含框或者另一个浮动框的边框为止
• 浮动框不在文档的普通流中，所以普通流中浮动的框就好像脱离了文档流一样存在，如下图所示：

我们给盒子2加了浮动以后，盒子2就脱离了文档流，盒子3就回到往上走，但盒子1仍然占据一行。

• 当我们给每个盒子都设置 `float: left;` 之后，盒子会横向排列，当高度超出一定距离后，会对浮动造成一定的影响

所以平时练习中，如果出现了，浮动框无法到达指定位置，可以考虑边界的影响。

• 现在我们给露思妹妹加上浮动，然后取消盒子1的浮动，会有如下的效果：这就是创建浮动框可以使文本围绕图像

我们把文本框当做行框，露思妹妹当做浮动框，则利用clear属性就可以阻止行框围绕浮动框，设置的值 left/right/both/none就表示框的哪些边不应该挨着浮动框，这句话很重要！

在盒子1上添加属性 `clear: left/both;`，就可以产生下面的效果，此时盒子1是没有浮动设置的，是在正常的文档流，由于清除了左边的浮动，所以向下一行。

但如果此时盒子1也有了向右的浮动，即浮动元素脱离了文档流，则包裹他们的div由于没有文档流中的内容，所以无法被撑开，效果如下：

这时候没有元素去清除它周围的浮动了，即使给包裹的div添加 `clear: both;`，也无动于衷，因为两个浮动元素是包裹在其中。

方法一：这时候我们就可以在后面添加一个div，添加一个可以施加浮动的帮手。代码如下：

<div class="test"><img class="zls" src="../imgs/zls.jpg" /><div class="box1">赵露思赵露思赵露思赵露思赵露思赵露思赵露思赵露思赵露思赵露思赵露思赵露思</div><div class="clear"></div>
</div>         

设置样式如下：

.clear {border: 1px dashed #000;clear: left;
}       

这时候它就会清楚左边的浮动，让露思妹妹回归文档流

如果是 `clear: right;`，那么它就会让盒子1回归正常的文档流。

当然，设置 `clear: both;`，它就会让包裹的父级div被撑开，如下：

方法二：当然，如果这场恋爱中，三个人已经足够，不想小四的插足，那么，也可以采取在包裹的父级元素后面（::after）加点东西，解决问题

.test::after {display: block;clear: both;content: '';/* visibility: hidden; *//* height: 0; */
}

其中，非注释的在谷歌浏览器中是必须项

方法三：如果觉得后面加东西有时候有点困难，那也有别的浪漫方式，直接在父级元素身上搞事情

.test {display: block;overflow: hidden;/* zoom: 1; */
}      

其中，非注释的在谷歌浏览器中是必须项，zoom可以换成固定的宽高。