CSS中的float属性

最新推荐文章于 2024-05-05 20:21:31 发布

原创最新推荐文章于 2024-05-05 20:21:31 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局

Web前端专栏收录该内容

4 篇文章

订阅专栏

Float属性介绍

　　position属性和float属性一直是进行样式设计时的重点和难点。这篇文章内容是关于float属性简介，及其在布局时的作用。
　　float属性，最初的定义其实是类似于word里面的文字环绕效果。这一点在css布局时也会体现出来。代码如下：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body {width: 200px; height: 100px;}
        img {float: right;}
        p {background-color: #aaaaaa;}
    </style>
</head>

<body>
    <p>
        <img src="./2.png" />
        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. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
</body>
</html>

原始float
这里可以看出，图片浮动在p块上，而p块中的文字是环绕在图片的四周的。
浮动元素不占任何正常文档流的空间，而浮动元素的定位还是基于正常的文档流(自上而下以及父子元素包含关系)。设置了float属性的元素自动转变为块级元素，拥有width、height等属性。比如上面例子的p块，由于img脱离了文档流，使p块从body的顶端开始。img是浮动在p块上的，p块里的文字则环绕在img四周。设置了元素浮动后，top、bottom、left、right属性就都不起作用了。只能通过margin或者padding来设置偏移和定位。

随着web前端的发展，float的含义和作用也发生了改变，现在float属性更多地用在了元素定位上。
从上例可以看出，设置了float属性的元素只会影响紧随在它后面的元素（这里是p块）。

float的应用及可能出现的问题

1.子元素设置浮动导致父元素没有高度

这种情况一般出现在父元素没有给固定高度，而子元素设置为float和有固定的高度。究其原因是子元素设置浮动后，会使子元素脱离文档流，即子元素设置float属性后，当前的html文档会当作子元素不存在一样，所以可以看作父元素内根本没有内容，高度当然也就撑不开。
代码如下：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            /*width: 200px;
            height: 200px;*/
            background-color: #7B7B7B;
        }

        .inner {
            /*float: right;*/
            width: 100px;
            height: 100px;
            background-color: #00EC00;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

效果图如下：
这里写图片描述
此时父元素被子元素撑开，高度和子元素高度一致。
当给子元素inner块添加float=right属性时，效果图如下：

父元素没有了！就是因为子元素设置浮动后从标准文档流中脱离出来了。

解决办法有如下：
- 设置父元素float属性。这样，父元素也是脱离当前文档流，子元素和父元素一起脱离，并且子元素仍在父元素内，父元素内容不空了，所以高度会适应子元素高度。
- 在最后一个设置浮动的子元素后加一个空div，清除浮动。即紧随inner标签后增加一个块级元素空标签。并设置clear: both。不过这样会增加额外的空标签。
- 父元素设置overflow：hidden属性。（注：如果父元素内不只有这一个floa属性的子元素，则如果其他子元素没有设置float属性，父元素的高度就和其他子元素中高度最高的一致。）

2.三栏布局，两边固定宽度中间自适应

首先给出利用float实现上述要求的代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        * {margin: 0; padding: 0;}
        .left {float: left; width: 100px; height: 200px; background-color: #7B7B7B;}
        .right {float: right; width: 100px; height: 200px; background-color: #00EC00;}
        .main {margin: 0 230px; height: 200px; background-color: #0000E3;}
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>
</html>

效果图：
float自适应宽度
使用这种方法一定要注意：
1. html结构为先写left块和right块，再写main块！因为float属性只会影响紧随其后的元素。如果是按照left-main-right的顺序写html结构，会出现如下情况：这里写图片描述
2. 左右两块需要设置width。中间块可不设置height，使其高度根据内容作相应改变。
3. 中间块与两边块的距离是通过margin: 0 230px;来控制的，230px即为距离控制量。