优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差,所以不建议使用
注意： 要求这个新的空标签必须是块级元素。
父级添加 overflow
可以给父级添加 overflow 属性,将其属性值设置hidden、 auto 或 scroll 。
子不教,父之过,注意是给父元素添加代码
优点：代码简洁
缺点：无法显示溢出的部分
:after 伪元素法
:after 方式是额外标签法的升级版。也是给父元素添加
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站： 百度、淘宝网、网易等
双伪元素清除浮动
也是给给父元素添加
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯等
七、定位
定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
1. 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移 。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
边偏移
边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。 这四个属性仅存在于定位当中
2. 四种定位模式
静态定位 static（了解）
语法：
选择器 { position: static; }
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到
相对定位 relative（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：
选择器 { position: relative; }
相对定位的特点：（☆）
它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
绝对定位 absolute（重要）
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：
选择器 { position: absolute; }
绝对定位的特点：（☆）
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离标准流的.
子绝父相 :子级是绝对定位的话，父级要用相对定位
固定定位 fixed （☆）
固定定位是元素固定于浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 { position: fixed; }
固定定位的特点：（☆）
以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。它的定位是相对于浏览器窗口的.
3. 元素的显示与隐藏
display 属性
display 属性用于设置一个元素应如何显示。
display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。
visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置， 就用 visibility：hidden
如果隐藏元素不想要原来位置， 就用 display：none
overflow 溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。
八、 CSS高级技巧
1.CSS 用户界面样式
更改用户的鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
li {cursor: pointer; }
轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none; }
防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的2
textarea{ resize: none;}
2.vertical-align 属性应用
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了
解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
把图片转换为块级元素 display: block;
3. 溢出的文字省略号显示
- 单行文本溢出显示省略号–必须满足三个条件
/*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;
- 多行文本溢出显示省略号
overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核)
4.常见布局技巧
- margin负值运用
- 文字围绕浮动元素
- 行内块巧妙运用:做网页低端的换页方格.
