码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-02-13 16:39:45      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:用途   16px   bubuko   .com   body   技术   pre   hidden   英语   

清除浮动的方法: 内墙法

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

这个技巧又使得父box重新可以被子box撑开高度了.
技术分享图片

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

由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开
技术分享图片

        .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撑开高度了.
技术分享图片

附录

overflow: hidden的用途

表示“溢出隐藏”。所有溢出边框的内容,都要被隐藏掉。
技术分享图片

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

标签:用途   16px   bubuko   .com   body   技术   pre   hidden   英语   

原文地址:https://www.cnblogs.com/iiiiiher/p/8446807.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!