[css]浮动-清除浮动的3种方法

本文介绍了CSS中解决浮动导致的高度塌陷问题的两种方法:内墙法与隔墙法。内墙法通过设置overflow:hidden使父元素重新获得高度;隔墙法则使用额外的元素作为隔墙来分开两个相邻的元素。

清除浮动的方法: 内墙法

注: 这是个奇淫技巧,没什么原理可言,记住即可

这个技巧又使得父box重新可以被子box撑开高度了.
1312420-20180213155443343-1637108562.png

隔墙法-适用于2个box之间上下排列

由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开
1312420-20180213155548906-169798054.png

        .cl {
            clear: both;
        }

        .h16 {
            height: 16px;
        }
<div class="box1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</div>

<div class="cl h16"></div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

overflow: hidden

注: 这是个奇淫技巧,没什么原理可言,记住即可

同时又使得父box又可以被子box撑开高度了.
1312420-20180213155902452-1762885464.png

附录

overflow: hidden的用途

表示“溢出隐藏”。所有溢出边框的内容,都要被隐藏掉。
1312420-20180213160626874-81773677.png

转载于:https://www.cnblogs.com/iiiiiher/p/8446807.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值