关于css浮动的一些理解

最新推荐文章于 2022-04-14 19:57:50 发布

陈小星_绛菱纱影

最新推荐文章于 2022-04-14 19:57:50 发布

阅读量982

点赞数

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

本文链接：https://blog.csdn.net/A657997301/article/details/52495887

版权

html/css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习了http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html后的一些体会

今天自学css的浮动（float）时，一直看不懂w3school上的一段代码，具体如下：

<!doctype html>
<html lang="en">
<head>
<style type="text/css">
    div.container
    {
        width:100%;
        margin:0px;
        border:1px solid gray;
        line-height:150%;
    }
    div.header,div.footer
    {
        padding:0.5em;
        color:white;
        background-color:gray;
        clear:left;
    }
    h1.header
    {
        margin:0;
    }
    div.left
    {
        float:left;
        width:160px;
        margin:0;
        padding:1em;
    }
    div.content
    {
        margin-left:190px;
        border-left:1px solid gray;
        padding:1em;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header"><h1 class="header">W3School.com.cn</h1></div>
        <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
        <div class="content">
            <h2>Free Web Building Tutorials</h2>
            <p>At W3School.com.cn you will find all the Web-building tutorials you need,
            from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
            <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p>
        </div>
        <div class="footer">Copyright 2008 by YingKe Investment.</div>
    </div>
</body>
</html>

这段代码展示的效果如图：

之前我一直十分不解

①、既然left是左浮动，为什么当content也设定为左浮动会出现两个不同列的情况（大部分浏览器不会有这个问题，但偏偏我就遇到了。。。）

如图：

<img src="https://img-blog.csdn.net/20160910172841407?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

答：那个参考的博客链接里面告诉我们：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

所以问题的答案其实就是这个框里面left和content加起来超过了一行所以不能放在一行:-(

这也同时告诉我们如果一定要组合到同一行用一个浮动和一个标准流是最好的！

②、div.header,div.footer里为什么要clear:left

答：left和content两个框虽然合在同一行了，但是未必嵌合得很好，也就是可能有一个框底部会比较突出，如果当left框比较突出的时候，你不加clear:left会出现这个效果：

底部这个footer框把left框挡住了，因为我们知道，标准流的框是一行挨着一行的，所以footer框肯定挨着content框，如果content刚好比较“矮”，footer就会将与其同行的left框挡住了。这个时候对footer框添加clear:left就能够使其左边框不会接合到浮动框（注意不能对left框添加clear:right，没用的！具体参照我前文博客链接）。

总之记住以下原理：

将一个框浮动，浮动的框上边是标准流元素，则顶部与这个元素的底部对齐，

另一个框不浮动，则也会顶部与上面这个元素的底部对齐。

这样两个框即可完成合并。

陈小星_绛菱纱影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css浮动的一些理解

学习了http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html后的一些体会今天自学css的浮动（float）时，一直看不懂w3school上的一段代码，具体如下： div.container { width:100%; margin:0px; bor
复制链接

扫一扫