欢迎来到Cecilia陈的博客

孤独，是人一生最好的修行。

[29--CSS] float 浮动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--float：left向左浮动-->
    <!--float：right向右浮动-->
    <!--如果一个标签元素设置了浮动效果，那么他是脱离文档流了-->
    <!--并且不管它之前是个什么样的元素，浮动过后都是一个块级元素-->
    <!--这时，如果他又父级的情况下，它就不受父级管了，必须要清除父级的浮动-->
    <style>
        .d1{width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }

        .d2{width: 200px;
            height: 200px;
            background-color: pink;
            float: right
        }

        .d3{width: 200px;
            height: 200px;
            /*clear: both;*/
            background-color: purple;}
    </style>

</head>
<body>
    <div class="d1">123</div>
    <div class="d2">456</div>
    <div class="d3">789</div>

</body>
</html>
posted @   Cecilia陈  阅读(113)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示