%：百分比单位以父元素为基准，如果父元素的高度不能确定，是无法显示的- 具有默认样式的标签：
body（margin）、h1（上下margin）、p（上下margin）、ul（上下margin和左paddinglist-style点样式）、a（cursor、underline） - 内联元素以文字的基线进行对齐而不是底线，会导致插入图片后容器底部有一些空隙，可以通过
vertical-align属性设置为bottom解决，或者将display属性转换为block - 蓝湖等设计辅助软件可以提供Photoshop切图插件便于工作
float浮动的注意事项：
○ 只会影响后面的元素，排在其前面的元素依然在原位
○ 下层的文字无法插入到浮动元素中，可以利用这个特点做文字混排的效果
○ 默认宽度根据内容长度决定
○ 嵌套浮动内部元素会影响外部元素
○ 主要给块元素添加，也可以给内联元素添加使其靠左靠右排列clear可以清除浮动效果，但是要看好是left、right还是both- 同时设置
float和clear属性，则该元素不会包围前面的float元素 - 父容器在有
float属性的子容器时，想要去除float效果的影响，还保持原来的布局，例如父容器的高度想随子元素变化但是子容器有float属性不受控制，下面的方法可以解决：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{border: orange 1px solid;}
#box{background-color: red; height: 100px; width: 100px; float: left;}
#box1{width: 200px; border: black 1px solid;}
/* 解决方案，设置类为如下属性 */
.clear::after{content: ''; display: block; clear: both;}
</style>
<body>
<div class='clear' id="box1"> <!--父容器，为其设定一个类-->
<div id = 'box'> <!--子容器-->
</div>
</div>
</body>
</html>
在上面所设置的属性当中，content必须为’’，代表空字符串，区别于none；display是使其变为块元素，能够在clear操作之后在子容器下方而不是后面；clear属性能够让元素不包围浮动元素；这样就相当于在子容器后方添加了一个内容为空且具有clear属性的块
