float 和 clear

float

特性1：可以为行内浮动元素设置宽高

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            background-color: #e3a345;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <span>123</span>
</body>
</html>

运行发现，宽高设置没有生效。加上float：left后，宽高设置生效了。前后结果变化：

2.两端自适应布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            background-color: #e3a345;
            width: 50px;
            height: 50px;
            float: left;
        }
        div{
            background-color: red;
            width: 100%;
            margin-left: 60px;
            height: 80px;
        }
    </style>
</head>
<body>
    <span>left</span>
    <div>right</div>
</body>
</html>

运行结果：

clear

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

Clear给元素约定一个规则，哪一边不允许出现浮动元素，如果出现了，则通过改变自身的位置【换下一行】来适应这个规则

三个元素都float left，中间元素clear right 无效，clear left，则后续两个都换到下一行去了

规律：clear的方向要对应floar 的方向，换行之后，原本跟在自己后面的元素依然跟在自己的后面

包裹浮动元素

<style>
    .clearfix:after{
        content:" ";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .container{
        background-color: #0F9E5E;
    }
</style>

<div class="container clearfix">
    <div style="float: left"> 123 </div>
</div>

另一种包裹浮动元素的方式是 使用BFC

posted @ 2017-11-16 23:49  HelloHello233  阅读(226)  评论(0)  编辑  收藏  举报