CSS之样式属性float

最新推荐文章于 2022-07-20 12:27:04 发布

ggq_507978539

最新推荐文章于 2022-07-20 12:27:04 发布

阅读量5k

点赞数 1

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_51492065/article/details/117572781

版权

HTML/CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

那么废话不多说，让我们的主角闪亮登场，众所周知，样式属性float可以让元素产生“浮动”的效果，它可以左浮动，当然还可以右浮动以及不浮动。那么，现在问题来了，我们希望容器可以随其内容长大，始终套住子元素，怎么办呢，那这里给大家介绍常用的三种方法：

1.让外层的DIV也浮动起来。

2.使用空层清除浮动。

3.给外层DIV添加样式overflow：hidden。

此处给大家推广一下，关于浮动的一些问题也可以在百度搜“高度塌陷”进行解决，请大家自行查阅，哈哈哈！！！

顺便这里给大家附带一个练习，此处请一边阅读一边实践哟~

代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0px;
            padding-inline-start: 0px;
            margin-top: 30px;
        }
        #div2{
            background-color: #e4f1fa; 
            height: 30px; width: 240px; 
            line-height: 30px; 
            margin-top: -20px;
        }
        #p1{
            font-size: 18px; 
            text-indent: 2em; 
            color: #0f7cbf; 
            font-family: 微软雅黑;
        }
        #p1:hover{
            text-decoration: underline;
        }
        span{
            color: #666;
            height: 20px;
            text-indent: 1em;
            margin-left: 10px;
            font-size: 15px;
            font-family: 'Times New Roman', Times, serif;
        }
        span:hover{
            color: #F60;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div style="background-color: #0f7cbf; height: 35px; width: 240px; line-height: 35px;">
        <p style="font-size: 18px; text-indent: 1em; color: aliceblue; font-family: 微软雅黑;"><b>家用电器</b></p>
    </div>

    <div id="div2">
        <p id="p1"><b>大家电</b></p>
        <div style="width: 230px; line-height: 30px; margin-top: -20px;">
            <ul>
                <li>
                    <span>平板电视</span>
                    <span>洗衣机</span>
                    <span>冰箱</span>
                </li>
                <li>
                    <span>空调</span>
                    <span>烟机/灶具</span>
                    <span>热水器</span>
                </li>
                <li>
                    <span>冷柜/酒柜</span>
                    <span>消毒柜</span>
                    <span>家庭影院</span>
                </li>
            </ul>
        </div>
    </div>
    <div id="div2" style="margin-top: 110px;">
        <p id="p1"><b>生活电器</b></p>
        <div style="width: 230px; line-height: 30px; margin-top: -20px;">
            <ul>
                <li>
                    <span>电风扇</span>
                    <span>净化器</span>
                    <span>吸尘器</span>
                </li>
                <li>
                    <span>净水设备</span>
                    <span>挂烫机</span>
                    <span>电话机</span>
                </li>
            </ul>
        </div>
    </div>
    
    <div id="div2" style="margin-top: 80px;">
        <p id="p1"><b>厨房电器</b></p>
        <div style="width: 230px; line-height: 30px; margin-top: -20px;">
            <ul>
                <li>
                    <span>榨汁机</span>
                    <span>电压力锅</span>
                    <span>电饭煲</span>
                </li>
                <li>
                    <span>豆浆机</span>
                    <span>微波炉</span>
                    <span>电磁炉</span>
                </li>
            </ul>
        </div>
    </div>

    <div id="div2" style="margin-top: 80px;">
        <p id="p1"><b>五金家装</b></p>
        <div style="width: 250px; line-height: 30px; margin-top: -20px;">
            <ul>
                <li>
                    <span>淋浴/水槽</span>
                    <span>电动工具</span>
                    <span>手动工具</span>
                </li>
                <li>
                    <span>仪器仪表</span>
                    <span>浴霸/排气</span>
                    <span>灯具</span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

效果图：