css中float详解

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

pingchuanz

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

阅读量1k

点赞数 2

分类专栏：前端文章标签： float详解

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css中float详解

一.标准文档流

Web网页的制作，是一个流，必须自上而下依次进行。
流的比喻很形象，就像水流一样，必须从上而下，像织毛衣一样。
那么究竟什么是标准文档流呢？在web中，标准文档流有以下几个特点：

1.高矮不齐，底边对齐

底部对齐

2.自动换行

无论字体大小有多高，图片大小有多高，底边始终对齐，而且会自动换行。

3.空白折叠现象

<p>我叫Feathers                                        
<img src="me.png">，人生没有什么追求，只有一个 
<span>学习</span>! 
<img src="zb.jpeg">学习让我快乐!生命在于学习！一刻不学习就浑身难受！
</p>

这串代码是上方图片中的文档的源代码，我们看到，我们无论在文档中输入多少空格或者是回车，都会被折叠为一个空格，这个现象称作空白折叠现象。

4.文本级标签与容器级标签

HTML将html标签分为两类，文本级和容器级。规定了标签的作用，文本级标签只能存放文本，而容器级标签可以容纳其他容器，也可以容纳文本。
注意：文本不仅仅是只文字，图片、链接等都是文本。所以，img标签既不是文本级标签，也不是容器级标签！只是使用标签的形式来表示图片而已。
文本级标签有：span,p,u,i,em,strong…
容器级标签有：div,h,li,dt,dd…

5.块级元素和行内元素

CSS将html元素分为两种块级元素和行内元素。通过display:inline/block给元素设置默认的样式，最主要的区别在于，块级元素占整行，而行内元素的宽度只会包裹内容。
行内元素
元素不能设置宽和高，
不能设置宽、高。默认的宽度，就是文字的宽度。
常见的行内元素有：span,u,i,em,strong…
块级元素
霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父容器的100%。
如果不设置高度，那么高度默认为包裹内容，或者说容器内的孩子会将容器的高度撑起来
常见的块级元素有：p,div,h,li,dt,dd… 注意p虽然是文本级元素，但它时块级元素。

6.块级元素和行内元素之间的转换

因为行内元素和块级元素之间各有各的特点，各有各的表达效果。通常，我们可能需要给span标签设置一个宽和高，给让div标签并排，此时就需要使用到元素类型转换。
我们可以通过display:block/inline设置元素的类型，从而达到我们想要的效果。

二.使用float

通过上一篇的学习中我们发现：所有元素都处于标准流之中，元素之底部始终对齐，顶部则高矮不一，实在是不怎么美观。

1.float属性

为了脱离文档流，就有了float属性。这个属性的名字就很有意思，float是漂浮的意思，漂浮在标准文档流之上，不受标准文档流的控制。并且形象的说明了这个属性的带来的效果。

脱离文档流的表现一：脱离文档流后元素漂浮在文档流之上

 <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
        .div1{
            float: left;    
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>    
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

脱离文档流的表现二：行内元素可以设置宽高，块级元素不再占用一行

元素脱离文档流后，元素永远都不会被文档流中的规则约束。文档流规定，行内元素无法设置宽和高，块级元素占用一行。脱离后，这个规则不再约束元素，代表着元素无论是块级元素还是行内元素，都可以设置宽和高，都可以不占用一行。

脱离文档流的表现三：文本内容不会被覆盖

文本内容不会被覆盖！！！文本内容不会被覆盖！！！文本内容不会被覆盖！！！
让我们看一下文字环绕效果的代码：

div{
            float: left;
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
        p{
            background-color: red;
        }
<body>
    <div>
    
    </div>
    <p>文字</p>
</body>

我们将div浮动，p标签是块级标签，不浮动。按照我们的猜想，div会覆盖p标签的一部分，但是奇异的事情发生了：

我们发现，浮动的元素虽然处于文档流的上方，但是并不会遮挡文本（文字图片链接），文本会自动浮动，形成字围效果。

脱离文档流的表现四：子元素不会再撑出父容器的高

因为父容器元素的高度默认为包裹子元素，当子元素浮动后，脱离文档流，子元素不再遵循文档流中的规则，也就不遵循块级元素行内元素的规则——所以子元素就不会再撑出父元素的高度。这样，父元素的高度就变为了0。如图（红色边框是父容器）：

脱离文档流的表现五：脱离文档流的元素，仍然是在父元素中浮动

绿色盒子并没有完全浮动到顶部，而是浮动到父元素的顶部。所以，浮动的元素的位置仍然会收到父元素的限制，即只会在父元素的进行浮动。

三.清除浮动方案

float虽然带来了很多好处，但是也带来了一些问题。

问题：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            float: left;
            list-style: none;
            height: 40px;
            width: 80px;
            background-color: orange;
            border: solid 1px #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="div1">
        <ul>
            <li>首页</li>
            <li>性感美女</li>
            <li>清纯妹子</li>
            <li>丝袜美眉</li>
            <li>非主流妹妹</li>
        </ul>
    </div>
    <div class="div2">
        <ul>
            <li>关于本站</li>
            <li>联系我们</li>
            <li>法律声明</li>
        </ul>
    </div>
</body>
</html>

我们像使用这段代码绘制两个导航条，但是结果却不尽人意。

我们发现，第二个div浮动到了第一个div后面。那么造成这个的原因是什么呢？

原因：

原因其实非常简单，上一篇我们讲到了使用float脱离文档流的几种表现，其中——脱离文档流表现四：子元素不会再撑出父容器的高和脱离文档流表现五：脱离文档流的元素，仍然是在父元素中浮动和是造成这种现象的主要原因。我们给两个div分别加边框，然后发现：

因为父元素都没有高度，所以两个div处在了同一个位置，且又占用一行。第一组li先开始浮动，浮动到了左上角，第二组li也要在顶部浮动，由于前面有了第一组li，所以就依靠着第一组li浮动了。由此造成了这样的效果。

解决办法

知道了为什么造成这样的错误，解决起来就比较容易了。

解决办法一，增加高度

原因是因为两个div处于同一个高度，影响了浮动的效果。所以，让第二组li在第一组li下面浮动，是最直接的方法，根据脱离文档流表现五：脱离文档流的元素，仍然是在父元素中浮动，我们可以通过改变第一个div的高度来改变第二个div的位置，让元素浮动在第一组li的下方：

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            border: solid 5px #000;
            /*加个高度*/
            height: 50px;
        }
        .div2{
            border: solid 5px red;
        }
        li{
            float: left;
            list-style: none;
            height: 40px;
            width: 80px;
            background-color: orange;
            border: solid 1px #000;
            text-align: center;
        }
    </style>

这样，第二个div的位置就在第一组li的下方了，两组li就不会相互依靠了。

解决办法二：clear:both

CSS提供了一个属性clear:both如下。
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

所以clear属性并不是清楚元素的浮动，而是用来指出不允许有浮动对象的边情况。

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            border: solid 5px #000;
        }
        .div2{
            border: solid 5px red;
            /*this........*/
            clear: both;
        }
        li{
            float: left;
            list-style: none;
            height: 40px;
            width: 80px;
            background-color: orange;
            border: solid 1px #000;
            text-align: center;
        }
    </style>

当我们给第二个div指定了clear:both属性后，我们发现，问题解决了。这是因为div2说，我的左边不可以有浮动的元素，浏览器就调整div2的位置，直到左边没有浮动的元素。

解决办法三：隔墙法和内墙法

隔墙法和内墙法，都是使用clear：both实现的，二者也有相似性。

隔墙法

为什么会出现隔墙法呢？狮子和猿猿们在使用clear:both时，发现一个很致命的问题，那就是因为这两个div都没有高，所以，要想给这个两个div设置间隔（margin），简直痴人说梦！！！还好，这点小挫折难不到狮子和猿猿们，隔墙法由此诞生。
既然无法设置margin，那么就在这两个div之间加入一个有高度的透明的div，这样就实现了margin的效果：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div0{
            border: solid 5px #000;
        }
        .div1{
            border: solid 5px red;
        }
        li{
            float: left;
            list-style: none;
            height: 40px;
            width: 80px;
            background-color: orange;
            border: solid 1px #000;
            text-align: center;
        }
        .spacing{
            height: 20px;
            border: solid 2px #000;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div0">
        <ul>
            <li>首页</li>
            <li>性感美女</li>
            <li>清纯妹子</li>
            <li>丝袜美眉</li>
            <li>非主流妹妹</li>
        </ul>
    </div>
    <div class="spacing">
        <!-- 我就是墙，用来当作边距 -->
    </div>
    <div class="div1">
        <ul>
            <li class="first">关于本站</li>
            <li>联系我们</li>
            <li>法律声明</li>
        </ul>
    </div>
</body>
</html>

这样就成功的设置了两个div之间的边距。

内墙法

隔墙法用了一段时间以后，猿猿和狮子们又发现有问题了，这次问题比较棘手，那就是想要给两个div设置背景，但是两个div都没有高度，每次设置高度太麻烦了，如果能让div的高度再次包裹子元素就好了。
没有什么可以难得到狮子们和猿猿们的，经过长时间的编码，猿猿们发现了一条很有趣的现象，刚好可以解决这个问题。那就是内墙法，将隔墙法中的墙放入到div的内部，让我们来看一看代码：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div0{
            border: solid 5px #000;
        }
        .div1{
            border: solid 5px red;
        }
        li{
            float: left;
            list-style: none;
            height: 40px;
            width: 80px;
            background-color: orange;
            border: solid 1px #000;
            text-align: center;
        }
        .spacing{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div0">
        <ul>
            <li>首页</li>
            <li>性感美女</li>
            <li>清纯妹子</li>
            <li>丝袜美眉</li>
            <li>非主流妹妹</li>
        </ul>
        <div class="spacing">
            <!-- 墙在内部 -->
        </div>
    </div>
    <div class="div1">
        <ul>
            <li class="first">关于本站</li>
            <li>联系我们</li>
            <li>法律声明</li>
        </ul>
    </div>
</body>
</html>

注意边框，我们可以看到插入墙的div1的高度包裹了子元素，达到了目的：

为什么呢？
还记得刚刚所说的那句话吗？这是因为diiv.spacing说，我的左边不可以有浮动的元素，浏览器就调整div2的位置，直到左边没有浮动的元素，这样div.spacing就移动了第一组li的下方，中间其实空出了li高度的空白，这些空白只不过是被浮动的li遮挡住了而已，并不是被脱离文档流的li撑出的高。

解决办法四：overflow:hidden

overflow:hidden是溢出隐藏的作用，示例如下：

他有一个副作用：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            border: solid 5px #000;
            overflow: hidden;
        }
        .div2{
            border: solid 5px red;
            overflow: hidden;
        }
        li{
            float: left;
            list-style: none;
            height: 40px;
            width: 80px;
            background-color: orange;
            border: solid 1px #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="div1">
        <ul>
            <li>首页</li>
            <li>性感美女</li>
            <li>清纯妹子</li>
            <li>丝袜美眉</li>
            <li>非主流妹妹</li>
        </ul>
    </div>
    <div class="div2">
        <ul>
            <li>关于本站</li>
            <li>联系我们</li>
            <li>法律声明</li>
        </ul>
    </div>
</body>
</html>

给div1和div2加上overflow:hidden后，我们发现，div1和div2有高了！！！
这样又很方便的设置背景了。
为什么呢?谁知道呢！

注意： IE6 不支持使用overflow:hidden 清除浮动

感谢原创！！！

pingchuanz

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css中float详解

css中float详解一.标准文档流Web网页的制作，是一个流，必须自上而下依次进行。流的比喻很形象，就像水流一样，必须从上而下，像织毛衣一样。那么究竟什么是标准文档流呢？在web中，标准文档流有以下几个特点：1.高矮不齐，底边对齐2.自动换行无论字体大小有多高，图片大小有多高，底边始终对齐，而且会自动换行。3.空白折叠现象&lt;p&gt;我叫Feathers ...
复制链接

扫一扫