浅谈浮动

最新推荐文章于 2024-05-15 11:50:03 发布

Roger Zhang

最新推荐文章于 2024-05-15 11:50:03 发布

阅读量186

点赞数

分类专栏： html 文章标签：浅谈css浮动

本文链接：https://blog.csdn.net/weixin_45787050/article/details/102759191

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

——浅谈浮动——

我们在制作页面时，经常会需要用到横向的功能布局，比如常见的导航栏，横向的展示图等，现有的布局方法往往都会有一定的局限性，因此我们便引入一个让开发人员又爱又恨的css属性：浮动。
什么是浮动？
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动属性及属性值：
float：right | left | none | inherit。通过相应的属性值，可以设置元素进行向左/右浮动。
具体我们可以看下图进行分析：
图1呈现的是未有浮动三个色块的状态，当我们对黑色块添加向右的浮动时，黑色会向右浮动直到遇到外边框时停下，
同时，由于浮动会令自身脱离文档流，像“悬停”一样，因此后面的两个块会向前跟进，形成图2的状态。当我们为黑色添加向右的浮动时，黑色便会浮动到右边，直到遇到边框会停下，形成图3的状态。如果同时给三个色块同时设置同一方向的浮动，就会达到图4的效果。通过对图4进行其他的css属性设定，就可以达到我们想要的结果了。
（图1）
（图2）
（图3）
（图4）在这里插入图片描述
浮动的问题：（解决）
由于添加浮动后，元素会脱离文档流，如果页面下方还有其他元素，则会影响整体布局，所以我们就要清除浮动，让元素在排列好的前提下不影响整体布局。
1.利用-clear-，那我们就引入一个新的css属性值，来帮助我们，就是“clear”clear可以规定元素的那一侧不允许其他浮动元素，其属性值有： left/center/both/none 。
下面是一个利用clear清除浮动已达到不影响整体页面布局的简单案例。

<style>   
    .box{width: 300px;height: 300px;border:1px solid#000;}
    .box p{width: 50px;height: 50px;margin:0;;border:2px solid #000;float: left;}
    *.box .clear{clear: both;}*
</style>
<body>
    <div class="box">
        <p></p>
        *<div class="clear"></div>*
        <span>这是一些文字这是一些文字这是一些文字
            这是一些文字这是一些文字这是一些文字这
            是一些文字这是一些文字</span>
    </div>
</body>

图5位为p元素增加了向左的浮动，因为浮动特性p脱离了文档流，下方的文字会移动到上方，这是我们在p后面增加div标签并利用clear清除他以达到图6的状态。
在这里插入图片描述（图5）（图6）
2.上面的方法虽然达到了我们想要的结果，但是增加了多余的代码，还有一种方法就是：我们可以给span标签页添加浮动标签，也可以达到相应的目的。
结语：利用浮动我们可以很好的进行网页布局，解决浮动问题的方法也不止上文分享的两种，您还知道那些方法可以清除浮动？可以在下方分享您的看法哦！