CSS—浮动

最新推荐文章于 2024-10-29 22:55:09 发布

原创最新推荐文章于 2024-10-29 22:55:09 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

28 篇文章

订阅专栏

本文详细解析了CSS中float属性的工作原理，展示了如何利用浮动进行网页布局，并通过实例讲解了清除浮动、设置父元素宽度及居中的方法。

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

浮动是一个很有用的属性，对于网页布局，特殊效果的实现都很有用。

float的基本原理

 float:left;//元素向左浮动
 float:right;//元素向右浮动

为div1设置 float：left之后

div为块级元素，所以每次新建都会另起一行。我们想象一下，这些未设置浮动的div盒子是在一个文档流内（假想一个平面内），当设置div1为左浮动后，他就在另一个高于原文档流的文档流内（假想，在高于原来平面的一个平面内）,但是div1已经在最左侧，所以左浮动，对于他没有表现上的改变，div2的改变才是需要关注的，这么复杂的原理，浏览器肯定也会出现兼容性的问题。

IE7（包括IE7以前）

现代浏览器及IE7以后

【个人情绪】为什么一提到兼容性，IE6.7就出来。。因为那几年，IE懈怠了，以为自己唯我独尊，所以不更新内核，渲染出什么来了？？！！
明显，IE6、7是不按照我上面写的浮动机制渲染的，IE7以后及现代浏览器，都是按照我上面写的浮动机制来的。
div1脱离文档流，div2占据div1原有文档流的位置。
细心一下，可以发现，div2上的文本内容被div1挤下去了，对于这种显现，我假象了一下，文本内容与文本内容的父元素不是在一个文档流内，而是高于父元素的文档流，这样就可以看到文本div2与浮动的div1在一个文档流内。

div1与div2分别设置左浮动后的效果

div1与div2均设置左浮动后，二者就在一个文档流内，所以就一个接着一个排着了。

div1左浮动，div2右浮动

【11月22日补充】

初始

将第二个设为浮动后，第三个在原来第二个的位置

可见，元素div2设置浮动后，并没有跑到div1的地方，是我以前误以为设置浮动后，就会浮动于另一层，div2应该也可以浮动到div1的上面，其实不是，只是浮动到他所在的这一行的最左面。

float的应用

关于网页布局
```
    #box{
        /*height: 150px;*/
        width: 205px;
        margin: 0 auto;
        border: 5px solid green;
    }
    #qq{
        height: 100px;
        width: 100px;
        background: red;
        float: left;
    }
    #aa{
        height: 100px;
        width: 100px;
        background: blue;    
        float: right;

    }
    #gg{
        clear: both;       //清除浮动
        height: 50px;
        width: 205px;
        background: yellow;    
    }
//以上是<style></style>内的设置
<div id="box">
    <div id="qq">div1</div>
    <div id="aa">div2</div>
    <div id="gg">div3</div>                
</div>
```
效果

上图是参照上面的代码，最后生成的效果，div1与div2在box内分别左浮动与右浮动，box分别设置了宽度与高度，并且作了居中处理。div3也可以正常的在div1与div2之下。是我们希望的样子。
但是下图是在这样的代码下的效果
```
<style type="text/css">
    #box{
        border: 5px solid green;
    }
    #qq{
        height: 100px;
        width: 100px;
        background: red;
        float: left;
    }
    #aa{
        height: 100px;
        width: 100px;
        background: blue;    
        float: right;

    }
    #gg{
        height: 50px;
        width: 205px;
        background: yellow;    
    }
</style>
```
效果

由于div1与div2均设置浮动，脱离文档流后，div3占据了他们原来的位置。
父元素box没有设置宽度，所以与body同宽，横跨了整个页面。因为里面有内容div3所以其高度同div3的高度。这也是未采取任何拯救措施的样子。

现在，就来拯救一下，网页布局

【第一步、去除浮动】
```
 #gg{clear: both;}//both:为左右浮动都去。同理可以去除左浮动left，右浮动right
```
效果

发现去除掉div1与div2的浮动后，div3则排在了div1与div2那一行的下面。而且外层div（即box）也将高度扩大了。
【第二步、设置外层div的宽度】
```
    #box{width: 205px;}
```
效果

发现已经初步达到，我们预期的效果。也证实了，子元素浮动的边界是父元素。
【第三步、居中】
text-line
在body标签内进行text-align=center只会使body内所有有文本的盒子呢，文本内容居中。所以达不到，我们想要的效果。

效果

margin
是盒子的外边界，关于css盒子的概念，我会另写一篇的。
```
    #box{margin: 0 auto;}//前提设置了宽度width
```
效果

首字符浮动
这是对文本内容的布局，我习惯在文本内容布局之前，对文本内容的padding与magin均清零。对段落p的行高，字体进行声明，避免浏览器默认效果的不同，导致网页不兼容。而且有时候，文本内容选择的字体也会导致浏览器不兼容。

p{
    margin: 0;
    padding: 0;
    height: 1rem;
    line-height: 1.5rem;
}//默认标准化设置，你面浏览器的默认效果
    #sap
    {
        padding: 0 15px;
        float:left;
        font-size: 4.5rem;
        font-weight: bold;
        line-height:4.45rem;
    }
    //html结构设置
<p>
    <span id="sap">T</span>This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text.……This is some text.
</p>

我们希望的样子

蓝色部分是我标注的，每一个元素的设置都是有拿捏的。
来看一下失败的例子。

未对p进行初始标准化设置
导致网页效果的差异性

左面谷歌，右面IE
使用了特殊字体
IE对该字体不是很兼容，发现该字体并没有居中

左火狐，右IE

刚才我并没有对字体进行标准化设置，网页也会出现不一样的效果，所以对字体也应该尽量的同一。
line-height的设置

左：line-height：4.6rem，右：line-height：4.5rem

为什么会出现仅因为0.1rem的差距，就有这样的差距呢？
首先，需要知道span标签，为行内元素，不具备高宽的设置，其高是由内容决定。在单行，文本情况下，line-height的高度决定了其高度。而这样也恰巧满足了line-height=height。导致文本内容居中。然后在看下图就明白了。

QQ截图20141120133114.png

浮动元素右面的段落每一个的line-height为1.5rem，三行，为4.5rem。当浮动元素设置为4.6rem时必然会占用右面下一个段落的位置，导致左面出现空白。