float对div宽度的影响

最新推荐文章于 2021-06-03 05:01:15 发布

cangowu

最新推荐文章于 2021-06-03 05:01:15 发布

阅读量4k

点赞数 3

分类专栏： html float 文章标签： html

本文链接：https://blog.csdn.net/wzgdjm/article/details/50762995

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

float

1 篇文章 0 订阅

订阅专栏

大部分时间，大家可能在重构的时候，都是先限制了div的宽度了的，但是很多时候没有必要这样做，利用float就可以很好的解决这个问题：

1.div宽度

默认情况下，div的宽度是自适应auto的，在没有设置float的情况下，宽度是自动调整最大化，设置float之后，宽度自动调整最小化。如下图：

2.div高度

是否设置float属性，高度都是自动调整最小化。

3.示例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 80%;
            margin: 0 auto;
        }

        .image {
            /*float: left;*/
            border: 1px solid #efefef;
            padding: 5px;
            margin: 5px;
        }

        a {
            text-decoration: none;
        }

        img {
            width: 200px;
            height: 200px;
        }

        .text {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="image">
        <a href="#">
            <img src="../img/xh.jpg" alt=""/>

            <div class="text">
                西湖美景
            </div>
        </a>
    </div>
<div style="clear:both"></div>
    <div class="image">
        <a href="#">
            <img src="../img/xh.jpg" alt=""/>

            <div class="text">
                西湖美景
            </div>
        </a>
    </div>

    <div class="image">
        <a href="#">
            <img src="../img/xh.jpg" alt=""/>

            <div class="text">
                西湖美景
            </div>
        </a>
    </div>

    <div class="image">
        <a href="#">
            <img src="../img/xh.jpg" alt=""/>

            <div class="text">
                西湖美景
            </div>
        </a>
    </div>

    <div class="image">
        <a href="#">
            <img src="../img/xh.jpg" alt=""/>

            <div class="text">
                西湖美景
            </div>
        </a>
    </div>
</div>
</body>
</html>