CSS - 清除浮动

源代码

<head>
    <meta charset="UTF-8">
    <title>css-test</title>
    <style>
        .float_left{ float: left; width: 100px; height: 100px;}
        .float_right{ float: right; width: 100px; height: 100px;}
        .no_float{ background-color: #aaa; }
    </style>
</head>
<body>
<div class="float_box">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试位置</div>
</body>
</html>

 

清除浮动方法:

1. 添加 <br clear='all'>

<div class="float_box">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
    <br clear="all">
</div>
<div class="no_float">测试位置</div>

 

2. 

clear_float{ clear: both; }
<div class="float_box">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
    <br class="clear_float">
</div>
<div class="no_float">测试位置</div>

或者

<div class="float_box">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
</div>
<div class="no_float clear_float">测试位置</div>

 

3. 给父元素添加 overflow : hidden

.float_box{ overflow: hidden; }

 

4. 用 display : table

 

5. 用 css 伪对象 :: after

.float_box::after{
    clear: both;
    display: block;
    content: "";
}

 

posted @ 2016-01-29 14:28  `Laimic  阅读(145)  评论(0)    收藏  举报