clear伪类使用

时间 2019-11-10

标签 clear 使用繁體版

原文原文链接

都知道float会脱离文档流用什么办法撑开父元素呢？手动在本区块的全部float元素以后加上一个块元素并对其添加clear:bothcss

能够可是这样还要再去修改html页面并且多了一个仅仅是为了控制布局却没有实际表现意义的元素很差..html

将float的父元素也设定为float 这样会致使更深的问题布局

将父元素设为overflow:hidden 很不错的办法推荐！可是我但愿内部的元素可以超出怎么弄呢？ui

用伪类！只须要修改css 就能向html中添加一个元素啦！spa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <style type="text/css">
        .root{
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .pos{

        }
        .fl{
            width: 300px;
            height: 200px;
            float: left;
            background-color: lime;
        }
        .fl2{
            background-color: black;
        }
        .pos:after{
            /*这5个属性缺一不可*/
            content: '.';
            visibility: hidden;
            clear: both;
            display: block;
            height: 0px; /*若是没有这个 容器会比float元素行多出一行字的高度*/

        }
        </style>
    </head>
    
    <body>
        <div class='root'>
        <div class='pos'>
            <div class='fl'></div>
            <div class='fl fl2'></div>
        </div>
        </div>
    </body>
</html>