最近在学习前端三大块中的css，在这里记录下学习笔记。
css浮动 float:left float:right
1，浮动元素有左浮动（float : left）和右浮动（float : right）两种。
2，浮动的元素会根据你设置的左或右往相对应的方向浮动，直到遇到父元素边界，或者其他元素才会停下来。
3，浮动可以让块元素、行内块元素自动转换为行内块元素。
4，浮动之后的元素相当于行内块元素，拥有行内块元素的特性（并在一行，支持所有样式），但是此时不会出现因代码换行而产生的间距问题。
5，浮动元素后面的不浮动的元素会占据浮动元素的位置，但后面不浮动元素内的文字会避开浮动元素的位置，利用此特性可以形成文字绕图的效果。
6，相邻浮动元素并在一行，但是超出父元素设置的宽度就会换行。如果不想换行，可以通过在父元素之上再设置一个元素，这个元素设置原本父元素的宽度，设置其overflow:hidden，然后将父元素的宽度加大，使其下面浮动的子元素适应的宽度。
7，如果浮动元素的父元素没有设置高度，那么浮动的元素无法将父元素撑开，这时候需要清除浮动。
清除浮动：
1，父级元素设置 overflow : hidden。一般不这样使用，这样会使得父元素下的其他元素溢出时被隐藏。
2，在最后一个子元素的后面加一个空的div标签，给它设置属性clear:both。
3，使用成熟的清除浮动样式类，clearfix。既可以清除浮动也可以解决margin-top塌陷（两个盒子嵌套时，内部盒子设置的margin-top会加到外面的盒子上，导致外面的盒子margin-top设置失败）问题。
.clearfix:after,.clearfix:before{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /* 浏览器兼容 */
zoom:1;
}
8，浮动元素之间没有垂直的margin合并。
练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动练习</title> <style> .box_con{ width: 958px; margin: 50px auto; border: 1px solid #8f8e8e; } .title_con{ width: 918px; height: 50px; margin: 0px auto; border-bottom: 1px solid #8f8e8e; } .title_con h3{ float: left; margin: 0px; padding: 0px 10px; font: normal 18px/50px 'Microsoft YaHei'; font-weight: bold; color: #000; border-bottom: 2px solid red; } .photo_con_wrap{ margin: 20px auto 13px; width: 918px; /* background-color: gold; */ overflow:hidden; } .photo_con{ margin: 0px; padding: 0px; list-style: none; width: 950px; /* background-color: tomato; */ overflow: hidden; } .photo_con li{ float: left; width: 160px; height: 68px; /* background-color: turquoise; */ margin: 0px 29px 25px 0px; } </style> </head> <body> <div class="box_con"> <div class="title_con"> <h3>图片展示</h3> </div> <div class="photo_con_wrap"> <!-- ul.photo_con>(li>a>img)*10 --> <ul class="photo_con"> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> <li><a href="#"><img src="./images/good_pic.jpg" alt="商品"></a></li> </ul> </div> </div> </body> </html>