html -- css浮动

最近在学习前端三大块中的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>