css 浮动布局，清除浮动

浮动的特性：

（1）浮动元素有左浮动（float:left）和右浮动（float:right）两种

（2）浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来

（3）相邻浮动的块元素可以并在一起，超出父级宽度就换行

（4）浮动让行内元素或块元素自动转化为行内块元素（此时不会有行内块元素间隙问题）

（5）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，开成文字绕图的效果

（6）父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动 overflow:hidden;

（7）浮动元素之间没有垂直margin的合并

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .con{
            width:400px;
            height:80px;
            border:1px solid gold;
            margin:50px auto 0;
        }

        .con div{
            width:60px;
            height:60px;
            /*display:inline-block;*/
            margin:10px;

        }

        .con .box01{
            background-color:green;
            float:left;
        }

        .con .box02{
            background-color:pink;
            float:right;
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="box01"></div>
        <div class="box02"></div>
    </div>
</body>
</html>

页面效果：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>新闻列表</title>

<style type="text/css">

.news_title{

width:400px;

height:40px;

border-bottom:1px solid #ff8200;

margin:50px auto 0;

}

.news_title h3{

float:left;

width:80px;

height:40px;

background-color:#ff8200;

margin:0;

font-size:16px;

color:#fff;

text-align:center;

line-height:40px;

font-weight:normal;

}

.news_title a{

float:right;

/*background-color:cyan;*/

/*width:80px;*/

/*height:40px;*/

text-align:right;

text-decoration:none;

/*line-height:40px;*/

font:normal 14px/40px "Microsoft YaHei";

color:#666;

}

.news_title a:hover{

color:#ff8200;

}

</style>

</head>

<body>

<div class="news_title">

<h3>新闻列表</h3>

<a href="#">更多></a>

</div>

</body>

</html>

页面效果：

清除浮动：

（1）父级上增加属性overflow:hidden

（2）在最后一个子元素的后面加一个空的div，给它样式属性clear.both（不推荐）

（3）使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content:””;display:table;}

.clearfix:after{ clear:both; }

.clearfix{ zoom:1; }

清除浮动的使用方法：

.con2{ ... overflow:hidden }

或者

<div class=”con2 clearfix”>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .list{
            width:210px;
            /* 不给高度出现浮动问题 */
            /*height:400px;*/
            list-style: none;
            border:1px solid #000;
            margin:50px auto 0;
            padding:0;
            /* 第一种清除浮动的方法 */
            /*overflow:hidden; !* 清除浮动 *!*/
        }

        .list li{
            width:50px;
            height:50px;
            background-color:gold;
            margin:10px;
            float:left;
        }
        /* 第三种清除浮动的方法 */
        .clearfix:after{
            content:"";
            display:table;
            clear:both;
        }

        /* 解决margin-top塌陷和清除浮动的方法合并为 */
        .clearfix:before,.clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        /* 兼容IE清除浮动的方法 */
        .clearfix{
            zoom:1;
        }

    </style>
</head>
<body>

    <ul class="list clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <!-- 第二种清除浮动的方法，实际开发中不用  -->
        <!--<div style="clear:both"></div>-->
    </ul>
</body>
</html>

页面效果：