清除浮动的几种常见方法

最新推荐文章于 2020-11-05 08:51:03 发布

hemingway_

最新推荐文章于 2020-11-05 08:51:03 发布

阅读量573

点赞数

分类专栏： web开发文章标签： html 文档布局标准浮动

本文链接：https://blog.csdn.net/zhuhaifei391565521/article/details/50146663

版权

web开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

清除浮动的几种常见方法

说起浮动，那么我们就很有必要来了解下html文档的几种常见的布局方式.

常见的文档布局方式

标准文档流

将窗体自上而下分成一行一行,并在每行中按从左至右的顺序依次排放元素,即为文档流.每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动.——[标准文档流]
浮动布局

基于浮动的布局利用浮动属性来排版定位元素，并在网页上创建列.可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一个div标签上时，浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页（或者其他包含块）的一边。任何显示在浮动元素下方的HTML都在网页中上移，并环绕在浮动元素周围.我个人的理解是“浮动浮动，先浮后动”——[w3school css float property]
定位布局

任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。——[w3cschool css position property]

小结

了解上述的几种常见布局方式，有助于我们对网页的结构有更深层次的了解.这样我们操纵起网页中的元素也就不会无从下手了，好了，废话不多说。上正题，如何清除浮动？谈到这个问题，可能有人会问，既然我们用到了浮动，那么为什么又要清除浮动咧！原因就是浮动元素会影响到其父元素以及浮动元素后面的元素的排版。打个简单的比方，假如有一群人正在排队买票，其中的一个人突然离开了队列(脱离了标准流),那么其后续的人肯定就会受到影响.网页中的浮动原理也与其类似.

清除浮动方法列表

清除浮动方法	使用频率
使用clear属性	often
额外标签法	增加了额外的代码,很少使用
overflow	often

清楚浮动方法详解

浮动的清理(clear)

none（默认值）

允许两边都可以有浮动对象
left

不允许左边有浮动对象
right

不允许右边有浮动对象
both

左右两边都不允许有浮动对象(always using)

实例代码

clear html代码

<body>
    <div class="btn-one">
        red
    </div>

    <div class="btn-two">
        green
    </div>

</body>

clear css样式

(为第一个块元素添加向右浮动属性)

     .btn-one{
            width: 100px;
            height: 100px;
            background: red;
            float: right;

        }
        .btn-two{
            width: 100px;
            height: 100px;
            background: green;
        }

screenshot

这里写图片描述

结果分析：

红色块元素因为添加了向右浮动的属性，所以会脱离标准流，而绿色块元素因此得以上移占据其原先的位置.

为绿色块元素添加clear属性(建议使用both)

html代码不变，css样式如下

        .btn-two{
            width: 100px;
            height: 100px;
            background: green;
            clear: both;
        }

screenshot

这里写图片描述

结果分析：

绿色块元素因为添加了清除浮动的属性，因而其布局方式并没有受到红色块元素右浮动的影响，所以能够保持在原来的位置.

浮动的清理(额外标签法)

w3c建议在容器的末尾添加一个“clear:both” 的元素，强迫容器适应它的高度以便装下所有的float元素.

实例代码

html代码

<body>
    <div id="header">
         头
    </div>
    <div id="container">
        <div id="left">
            左
        </div>
        <div id="right">
            右
        </div>
    </div>
    <div id="footer">
          尾
    </div>
</body>

css代码


        body,div{
            margin: 0;
            padding: 0;
        }

        #header{
            width: 600px;
            height: 80px;
            background: blue;
            margin: 0 auto;
        }

        #container{
            width: 600px;
            margin: 0 auto;
            background: purple;
        }
        #left{
            width: 200px;
            height: 80px;
            background: red;
            float: left;
           }
        #right{
            width: 200px;
            height: 180px;
            background: yellow;
            float: right;
        }
        #footer{
            width: 600px;
            height: 100px;
            background: pink;
            margin: 0 auto;
            clear: both;
        }

screenshot

这里写图片描述

细心的盆友应该可以发现，正式由于container中的left element以及right element添加了float property，所以导致container的background：purple背景颜色未能正常的显示.那么该如何解决？

为container这个元素添加额外标签

在原有的html代码container元素中添加下述代码

 <!--注意这是一个空的div-->

 <div id="clear"></div>

在原有的css代码块后添加下述代码

    #clear{
            clear:both;
        }

screenshot

这里写图片描述

结果分析：

当我们添加了一个空的div元素后，并且设置其属性为clear:both后，container元素的背景颜色正常显示，其并未受到子元素的浮动属性的影响，清楚浮动成功。

浮动的清理(overflow)

设置当对象的内容超过其指定的高度以及宽度时该如何管理对象

visible（默认值）

不剪切内容也不添加滚动条
auto

在必须时对象内容才会被裁切或显示滚动条
hidden

不显示超过对象尺寸的内容
scroll

总是显示滚动条

实例代码

注意：依旧使用额外标签法中的第一份代码，仅需对css代码做稍许的修改

css代码

 #container{
            width: 600px;
            margin: 0 auto;
            background: purple;
            overflow: hidden;
        }

screenshot

这里写图片描述

结果分析：

为父元素添加overflow:hidden属性后，其背景颜色也能正常显示.清楚浮动成功

总结

上述的方法仅供参考，如有不对的地方还望各位大神不吝赐教。（方法有很多种，最重要的是适合自己），仍会不断的更新，不断的完善.

hemingway_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的几种常见方法

1.常见的文档布局2.常见的清理浮动的方式
复制链接

扫一扫

专栏目录