这是我参与「第四届青训营 」笔记创作活动的第14天。
清除浮动
清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响。
- 如果父盒子本身有高度，则不需要清除浮动。
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影凯响下面的标准流了。
选择器 { clear: 属性值; }
| 属性值 | 描述 |
|---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
both | 同时清除左右两侧浮动的影响 |
清除浮动的方法
1、额外标签法也称为隔墙法 2、父级添加overflow属性 3、父级添加after伪元素 4、父级添加双伪元素
1、额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear: both"></div>，或者其他标签(如<br/>等)。
- 优点：通俗易懂，书写方便。
- 缺点：添加许多无意义的标签，结构化较差。
注意：要求这个新的空标签必须是块级元素。
2、父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
- 优点：代码简洁。
- 缺点：无法显示溢出的部分。
3、:after伪元素法
:after方式是额外标签法的升级版。也是给父元素添加。
clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom:1;
}
- 优点：没有增加标签，结构更简单。
- 缺点：照顾低版本浏览器。
4、双伪元素清除浮动
也是给给父元素添加。
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
- 优点：代码更简洁。
- 缺点：照顾低版本浏览器。
常见的图片格式
- jpg 图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用 jpg 格式的。
- gif 图像格式：GIF 格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
- png图像格式是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，选择 png 格式。
- PSD 图像格式 PSD 格式是 Photoshop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对前端来说最大的优点是可以直接从上面复制文字、获得图片，还可以测量大小和距离。
CSS书写循序
建议遵循以下顺序：
1、布局定位属性：
display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式) 2、自身属性：width/height/margin/padding/border/background3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word4、其他属性(CSS3):content./cursor/border-radius/box-shadow/text-shadow/background::linear-gradient...
