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>

<head>

.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>

</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 }

或者

代码：

<!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>

页面效果：