CSS浮动和清理浮动
1.浮动float
div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性，就会变成块级标签。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>10float页面布局示例</title> <style> * { margin: 0px; padding: 0px; } .c1 { height: 1000px; width: 20%; background-color: darkslategrey; float: left; /* 使用浮动属性，将div1和div2两个块级标签横向推挤在一起。假如两个标签能够摆在一排，就会浮动到一起 */ } .c2 { height: 1000px; width: 80%; background-color: black; float: left; } </style></head><body><!-- 设置一个div占用屏幕左侧的百分20，一个div占屏幕右侧的百分之80 --><div class="c1"></div><div class="c2"></div></body></html>
2.清理浮动clear属性
（1）利用伪元素具备clear清理浮动的属性来处理父标签塌陷的问题（父标签撑不起来的问题）
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>11清理浮动示例</title> <style> /* 通用样式将整个浏览器的外边距与内边距设置为0 */ * { margin: 0; padding: 0; } #d1 { border: 1px solid black; } .c1, .c2 { float: left; /* 左浮动 */ height: 100px; } /*.c3 {*/ /*!*height: 100px;*!*/ /*clear: left;*/ /*}*/ /* 在d1这个标签的最后加一个伪元素,伪元素的内容为空，但具备清理浮动的属性，处理了父标签塌陷问题*/ #d1:after { content: ""; clear: left; display: block; } </style></head><body><div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div></div></body></html>
3.overflow溢出属性
（1）利用overflow溢出属性做圆形头像的例子
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>12overflow示例</title> <style> .c1 { width: 120px; height: 120px; border: 1px solid black; /*overflow: scroll; !* 当内容溢出时，则会使用滚动条，防止内容溢出 *!*/ overflow: auto; /* 同样是添加了滚动条来防止溢出*/ } /* 使头像变成圆形的例子 */ .header-img { width: 120px; height: 120px; border: 2px solid #FF0000; border-radius: 100%; /* 圆形边框 */ overflow: hidden; /* 假如内容溢出了则隐藏掉溢出的部分 */ } img { max-width: 100%; /* 设置图片的最大宽度为100%，也就是和父标签一样大 */ } </style></head><body><!-- 因为文本内容过多，文本内容超过了父标签的长和高，则发生内容了溢出 --><div class="c1">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</div><!-- 利用overflow溢出的属性来完成圆形的头像，设置好了父标签的大小，在父标签里用一个字标签设置图片，子标签的图片比父标签大的话，则利用子标签的max-width: 100%来处理，圆形利用父标签的溢出属性处理 --><div class="header-img"> <img src="huluwa.png" alt=""></div></body></html></pre>4.清理浮动示例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>float下午版</title> <style> #d1 { border: 1px solid black; } .c1 { height: 50px; width: 50px; background-color: blue; border: 1px solid red; float: left; /* 添加左浮动属性 */ } /* 清理浮动的反作用，高度不会跑了 */ /*.c2 {*/ /*background-color: darkslategrey;*/ /*clear: left; !* 清理左浮动，有了这句话即可以让d1标签撑起来了，左边不能有浮动的元素 *!*/ /*}*/ /* 另外一种清理浮动反作用的方法 */ /*#d1:after {*/ /*content: '';*/ /*clear: both;*/ /*display: block;*/ /*}*/ /* 使用类样式进行清理浮动,之后只需需要清理浮动，标签都可以使用这个样式 */ .clearfix:after { content: ''; clear: both; display: block; } </style></head><body><div id="d1" class="clearfix"> <div class="c1"></div> <!-- c1的浮动属性会导致d1这个父标签的高度撑不起来 --> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <div class="c2"></div></div><div class="c3">我是解药</div></body></html></pre>
