1.浮动float
div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性，就会变成块级标签。
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <title>10float页面布局示例</title> 6 7 <style> 8 9 * { 10 margin: 0px; 11 padding: 0px; 12 } 13 14 .c1 { 15 height: 1000px; 16 width: 20%; 17 background-color: darkslategrey; 18 float: left; /* 使用浮动属性，将div1和div2两个块级标签横向推挤在一起。如果两个标签能够摆在一排，就会浮动到一起 */ 19 } 20 21 .c2 { 22 height: 1000px; 23 width: 80%; 24 background-color: black; 25 float: left; 26 } 27 28 </style> 29</head> 30<body> 31 32<!-- 设置一个div占用屏幕左侧的百分20，一个div占屏幕右侧的百分之80 --> 33<div class="c1"></div> 34<div class="c2"></div> 35 36</body> 37</html>
2.清除浮动clear属性
（1）利用伪元素具有clear清除浮动的属性来解决父标签塌陷的问题（父标签撑不起来的问题）
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <title>11清除浮动示例</title> 6 7 <style> 8 /* 通用样式将整个浏览器的外边距与内边距设置为0 */ 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 #d1 { 15 border: 1px solid black; 16 } 17 18 .c1, 19 .c2 { 20 float: left; /* 左浮动 */ 21 height: 100px; 22 } 23 24 /*.c3 {*/ 25 /*!*height: 100px;*!*/ 26 /*clear: left;*/ 27 /*}*/ 28 29 /* 在d1这个标签的最后加一个伪元素,伪元素的内容为空，但具有清除浮动的属性，解决了父标签塌陷问题*/ 30 #d1:after { 31 content: ""; 32 clear: left; 33 display: block; 34 } 35 </style> 36 37</head> 38<body> 39 40<div id="d1"> 41 <div class="c1">c1</div> 42 <div class="c2">c2</div> 43</div> 44 45</body> 46</html>
3.overflow溢出属性
（1）利用overflow溢出属性做圆形头像的例子
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <title>12overflow示例</title> 6 <style> 7 .c1 { 8 width: 120px; 9 height: 120px; 10 border: 1px solid black; 11 /*overflow: scroll; !* 当内容溢出时，则会使用滚动条，防止内容溢出 *!*/ 12 overflow: auto; /* 同样是增加了滚动条来防止溢出*/ 13 } 14 /* 使头像变成圆形的例子 */ 15 .header-img { 16 width: 120px; 17 height: 120px; 18 border: 2px solid #FF0000; 19 border-radius: 100%; /* 圆形边框 */ 20 overflow: hidden; /* 如果内容溢出了则隐藏掉溢出的部分 */ 21 } 22 23 img { 24 max-width: 100%; /* 设置图片的最大宽度为100%，也就是和父标签一样大 */ 25 } 26 </style> 27 28</head> 29<body> 30<!-- 由于文本内容过多，文本内容超过了父标签的长和高，则发生内容了溢出 --> 31<div class="c1">海燕啊，你可长点心吧燕啊，你可长点心吧。燕啊，你可长点心吧。燕啊，你可长点心吧。燕啊，你可长点心吧。。</div> 32 33<!-- 利用overflow溢出的属性来完成圆形的头像，设置好了父标签的大小，在父标签里用一个字标签设置图片，子标签的图片比父标签大的话，则利用子标签的max-width: 100%来解决，圆形利用父标签的溢出属性解决 --> 34<div class="header-img"> 35 <img src="huluwa.png" alt=""> 36</div> 37</body> 38</html>
4.清除浮动示例
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <title>float下午版</title> 6 <style> 7 #d1 { 8 border: 1px solid black; 9 } 10 11 .c1 { 12 height: 50px; 13 width: 50px; 14 background-color: blue; 15 border: 1px solid red; 16 float: left; /* 增加左浮动属性 */ 17 } 18 19 /* 清除浮动的副作用，高度不会跑了 */ 20 /*.c2 {*/ 21 /*background-color: darkslategrey;*/ 22 /*clear: left; !* 清除左浮动，有了这句话就可以让d1标签撑起来了，左边不能有浮动的元素 *!*/ 23 /*}*/ 24 25 /* 另外一种清除浮动副作用的方法 */ 26 /*#d1:after {*/ 27 /*content: '';*/ 28 /*clear: both;*/ 29 /*display: block;*/ 30 /*}*/ 31 32 /* 使用类样式进行清除浮动,之后只要需要清除浮动，标签都可以使用这个样式 */ 33 .clearfix:after { 34 content: ''; 35 clear: both; 36 display: block; 37 } 38 39 </style> 40</head> 41<body> 42 43<div id="d1" class="clearfix"> 44 <div class="c1"></div> <!-- c1的浮动属性会导致d1这个父标签的高度撑不起来 --> 45 <div class="c1"></div> 46 <div class="c1"></div> 47 <div class="c1"></div> 48 <div class="c2"></div> 49</div> 50 51<div class="c3">我是解药</div> 52 53</body> 54</html>
