Day_9

CSS清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
        }
        div li {
            float: left;
            background: #0457b7;
            margin: 30px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
        </ul>
    </div>
</body>
</html>

　　如代码所示，我在页面之中放了一个div里面放一个ul，然后再在里面放了6个li，然后将li设置成向左浮动，这时候效果如图所示

　　这么一看效果基本没有问题，我们实现了六个的li的并排排列，可是当我们检查时会发现

　　ul的高度被挤到了上部，不再包含li了，这就是浮动带来的对父元素的内部高度为0的异常，因为子元素添加浮动之后，不再属于父元素的限定了，所以没有高度的父元素就缩起来了。

　　这是我们想要的效果

　　却变成了这样

　　这个时候我们就要想办法清除浮动的影响，我们有几种清除浮动的影响

扫描二维码关注公众号，回复： 6820402 查看本文章

　　1.额外标签法

　　2.父级添加overflow

　　3.使用after伪元素清除

　　4.使用before和after清除等

　　下面是一种清除浮动的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
        }
        div li {
            float: left;
            background: #0457b7;
            margin: 30px;
            font-size: 30px;
        }
        div ul {
        }
        .di {
            height: 400px;
            background: #E91E63;
            clear: both;    /*此处清除浮动*/
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
        </ul>
        <div class="di"></div>
    </div>
</body>
</html>

　　溜了溜了

猜你喜欢