CSS 基础（012_浮动）

最新推荐文章于 2024-08-17 22:24:13 发布

柯南道尔2606

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量310

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

CSS Layout - float and clear

float 属性指定元素是否需要浮动。
clear 属性用以控制浮动元素的行为。
CSS Layout - float and clear

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.left{
                background-color: #2196F3;
                padding: 20px;
                float: left;
                width: 30%;
                opacity: 0.7;
                text-align: center;
            }

            div.right {
                background-color: #F44336;
                padding: 20px;
                float: right;
                width: 30%;
                opacity: 0.7;
                text-align: center;
            }

            .floatl::after {
                color: white;
                content: "Float Left";
                font-weight: bold;
            }

            .floatr::after {
                color: white;
                content: "Float Right";
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="left">
            <span class="floatl"></span>
        </div>
        <div class="right">
            <span class="floatr"></span>
        </div>
    </body>
</html>

The float Property

最简单的使用，float 属性用以对图片盘绕文字。
下列示例指定图片在文本中向右浮动：

The float Property

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                float: right;
                margin: 0 0 10px 10px;
            }
        </style>
    </head>
    <body>
        <p>In this example, the image will float to the right in the
            paragraph, and the text in the paragraph will wrap around the image.</p>
        <p>
            <img src="http://www.w3schools.com/css/w3css.gif" alt="W3Schools.com" width="100" height="140">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
            imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
            scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices
            nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
            aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
            odio. Praesent convallis urna a lacus interdum ut hendrerit risus
            congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
            In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec
            vitae dui eget tellus gravida venenatis. Integer fringilla congue eros
            non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
            purus. Mauris quis diam velit.
        </p>
    </body>
</html>

The clear Property

clear 属性用以控制浮动元素的行为。
位于浮动元素之后的元素将围绕浮动元素而布局。为了避免这种情况，可以使用 clear 属性。
clear 属性指定哪个方位的浮动元素不能浮动：
The clear Property

<!DOCTYPE html>
<html>
    <head>
        <style>
            .div1 {
                float: left;
                width: 100px;
                height: 50px;
                margin: 10px;
                border: 3px solid #73AD21;
            }

            .div2 {
                border: 1px solid red;
            }

            .div3 {
                float: left;
                width: 100px;
                height: 50px;
                margin: 10px;
                border: 3px solid #73AD21;
            }

            .div4 {
                border: 1px solid red;
                clear: left;
            }
        </style>
    </head>
    <body>
        <h2>Without clear</h2>
        <div class="div1">div1</div>
        <div class="div2">
            div2 - Notice that the div2 element is after
            div1, in the HTML code. However, since div1 is floated to the left,
            this happens: the text in div2 is floated around div1, and div2
            surrounds the whole thing.
        </div>

        <h2>Using clear</h2>
        <div class="div3">div3</div>
        <div class="div4">
            div4 - Using clear moves div4 down below the
            floated div3. The value "left" clears elements floated to the left.
            You can also clear "right" and "both".
        </div>
    </body>
</html>

The clearfix Hack - overflow: auto;

如果一个元素的高度比它的父级容器要高，那么，该元素会浮动且会溢出容器。
然而，我们可以对容器元素添加 overflow: auto; 来修复这个问题：
The clearfix Hack - overflow: auto;

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                border: 3px solid #73AD21;
            }

            .img1 {
                float: right;
            }

            .clearfix {
                overflow: auto;
            }

            .img2 {
                float: right;
            }
        </style>
    </head>
    <body>

        <p>
            In this example, the image is taller than the element containing
            it, and it is floated, so it overflows outside of its container:
        </p>
        <div>
            <img class="img1" src="http://www.w3schools.com/css/w3css.gif" alt="W3Schools.com" width="100" height="140">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
        </div>
        <p style="clear: right">
            Add a clearfix class with overflow: auto;
            to the containing element, to fix this problem:
        </p>
        <div class="clearfix">
            <img class="img2" src="http://www.w3schools.com/css/w3css.gif" alt="W3Schools.com" width="100" height="140">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
        </div>
    </body>
</html>

Web Layout Example

对整个 web 布局使用 float 属性是通常的做法：
Web Layout Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                border: 3px solid blue;
            }

            .clearfix {
                overflow: auto;
            }

            nav {
                float: left;
                width: 200px;
                border: 3px solid #73AD21;
            }

            section {
                margin-left: 206px;
                border: 3px solid red;
            }
        </style>
    </head>
    <body>
        <div class="clearfix">
            <nav>
                <span>nav</span>
                <ul>
                    <li><a target="_blank" href="#">Home</a></li>
                    <li><a target="_blank" href="#">CSS</a></li>
                    <li><a target="_blank" href="#">HTML</a></li>
                    <li><a target="_blank" href="#">JavaScript</a></li>
                </ul>
            </nav>
            <section>
                <span>section</span>
                <p>
                    Notice we have put a clearfix on the div container. It is not
                    needed in this example, but it would be if the nav element was
                    longer than the non-floated section content.
                </p>
            </section>
            <section>
                <span>section</span>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
                    odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
                    est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
                    vestibulum augue ut aliquet.
                </p>
            </section>
        </div>
    </body>
</html>

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础（012_浮动）

CSS Layout - float and clearfloat 属性指定元素是否需要浮动。 clear 属性用以控制浮动元素的行为。 html> head> style> div.left{ background-color: #2196F3; padding:
复制链接

扫一扫

专栏目录