盒模型第二部分

最新推荐文章于 2025-08-08 09:39:17 发布

原创最新推荐文章于 2025-08-08 09:39:17 发布 · 403 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #盒模型

CSS 同时被 3 个专栏收录

3 篇文章

订阅专栏

css选择器

2 篇文章

订阅专栏

盒模型

2 篇文章

订阅专栏

本文详细介绍了CSS中浮动的概念及清除浮动的四种方法，包括加高法、clear:both、隔墙法和使用overflow:hidden;同时探讨了浏览器兼容问题、margin塌陷现象及居中技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.浮动的清除
1.1 清除浮动方法1：给浮动的元素的祖先元素加高度。
<1>如果一个元素要浮动，那它的祖先元素一定要有高度。
<2>有高度的盒子，才能关住浮动。
<3>这种方法在工作中用的很少。
1.2 清除浮动方法2 : clear:both
<1>网页制作中，高度很少出现。这是因为能被内容撑高。
<2>clear:both
clear 清除 both指的是左浮动、右浮动都要清除，清除对我的影响。
这种方法会导致margin失效。

    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>

    <div class="box2">  这个div里面写一个clear：both；属性
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>

1.3 清除浮动方法3：隔墙法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .cl{
            clear: both;

        }
        .h10{
            height: 10px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>
    <div class="cl h10"></div> 这个墙，隔开了两部分浮动。两部分浮动，互不影响。
    <div class="box2"> 
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>

<1>一个父亲，是不能被浮动的儿子，撑出高的。
<2>内墙法

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

        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .cl{
            clear: both;
        }
        .h16{
            height: 16px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
        <div class="cl h16"></div>
    </div>

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

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

公式：两个p都浮动，所以div不能被撑出高。而在家里面修一堵墙，就能够让div被儿子撑出高了。
3.4 清除浮动的方法4： overflow:hidden;
<1>overflow:hidden; 溢出隐藏
<2>所有溢出边框的内容，都要隐藏掉。（本意就是清除溢出到盒子外面的文字。）
<3>一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上ｏｖｅｒｆｌｏｗ：ｈｉｄｄｅｎ；那么，父亲就能被儿子撑出高了。

 div{
    width:400px;
    border:10px solid black;
    overflow:hidden;
}

1.5浮动总结：
<1>加高法：
浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度。这是因为麻烦，并且不能适应页面的快速变化。所以，我们就要找到，不给盒子加高度，但是也能够清除浮动的方法。

    <div>    设置height
        <p></p>
        <p></p>
        <p></p>

    </div>
    <div>   设置height
        <p></p>
        <p></p>
        <p></p>
    </div>

<2>最简单的清除浮动的方法，就是给盒子增加 clear:both; 表示自己的内部元素，不受其他盒子的影响。

    <div>    
        <p></p>
        <p></p>
        <p></p>

    </div>
    <div>    clear:both
        <p></p>
        <p></p>
        <p></p>
    </div>

浮动确实被清除了，不会互相影响，但是margin失效，两个div之间没有任何的间隙了。
<3>隔墙法：
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

    <div>    
        <p></p>
        <p></p>
        <p></p>

    </div>
    <div class="cl h10"></div>
    <div>   
        <p></p>
        <p></p>
        <p></p>
    </div>

上面的例子中，第一个div没有高度。如果我们想让第一个div，自动根据自己的儿子，撑出高度，我们就要使用内墙法。

    <div>    
        <p></p>
        <p></p>
        <p></p>
       <div class="cl h10"></div>
    </div>

    <div>   
        <p></p>
        <p></p>
        <p></p>
    </div>

内墙法的优点：不仅能让后部分的p不去追前部分的p，并且能把第一个div撑出高度。这样，这个div的背景、边框就能根据p的高度来撑开了。
<4>overflow；hidden;
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高了，并且overflow:hidden;能够让margin生效。

1.6 浏览器兼容问题
<1>IE6 不支持小于12px的盒子。（微型盒子）
解决办法:将盒子的字号设置小（小于盒子的高）。

height:4px;
font-size:0px;

<2>浏览器hack：就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器的兼容。
IE6只要在css属性之前，加上下划线，就是IE6认识的专属属性。

_background-color:green;

解决微型盒子，正确写法：

height:10px;
_font-size:0;

<3>IE6不支持用Overflow：hidden；来清除浮动的。
解决办法：

overflow：hidden；
_zoom:1;
(不放大也不缩小)

实际上，_zoom:1;能够触发hasLayout机制，这个机制只有IE6有。
overflow：hidden；的本意，是溢出盒子的内容隐藏，这一点IE6是兼容的,不兼容的是清除浮动。
伴生属性：如果碰到IE6的兼容问题，就多写一条hack.
2.margin
2.1 margin的塌陷现象
标准文档流中，竖直方向的margin是不叠加的，以较大的为主。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
2.2 盒子居中 margin:0 auto;
<1>margin的值可以为 auto，表示自动。当right/left两个方向都为auto的时候，盒子居中。

margin-left:auto;
margin-right:auto;
简写为：
margin：0 auto；

注意：
（1）使用margin:0 auto；的盒子，必须有width.
（2）只有标准流的盒子，才能使用margin:0 auto；居中。
当一个盒子浮动、绝对定位、固定定位，都不能使用margin:0 auto；。
（3）margin:0 auto；是在居中盒子，并不是在居中文本。
文本的居中要使用：

text-align:center;

text-align:left; 默认居左
text-align:right;文本居右

2.3善于使用父亲的padding,而不是儿子的margin
<1>如果父亲没有border，那么儿子的margin实际上踹的是流。所以父亲也就掉下来了。
<2>margin这个属性，本质上描述的兄弟和兄弟之间的距离；最好不要用这个margin表达父子之间的距离。
2.4 关于margin的IE6兼容问题
<1>IE6 双倍margin bug
当出现连续浮动的元素，携带和浮动方向相反的margin时，队首的元素，会双倍margin。
解决方案：
（1）使浮动的方向和margin的方向相反。

float:left;
margin-right:40px;

（2）使用hack;(没必要)
单独给队首的元素，写一个一半的margin.

<li class="no1"></li>

ul li.no1{
    _margin-left:20px;
}

<2>IE6的3px bug
解决办法：不用管，不允许用儿子踹父亲。所以，如果你出现了3px bug ，说明你的代码不标准。
5.fireworks和精确还原图
<1>CSS中，任何文本都有行高。
<2>首行空两个汉字的格，单位叫做em. em就是汉字的一个宽度。
text-indent: 2em;

盒模型 第二部分

盒模型第二部分