float

最新推荐文章于 2023-06-09 16:23:28 发布

hell0__kitty

最新推荐文章于 2023-06-09 16:23:28 发布

阅读量391

点赞数 3

分类专栏： CSS 文章标签：浮动清除浮动

本文链接：https://blog.csdn.net/hell0__kitty/article/details/51063702

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浮动的概念
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .div1 {
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            .div2 {
                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="div1"></div>
            <div class="div2"></div>
            当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。
            因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
        </div>
    </body>
</html>

3.清除浮动的办法

给父容器设置overflow： hidden
父元素也设置浮动
在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>
给父元素添加clearfix类

hell0__kitty

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
float

浮动的概念浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动的例子 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫

专栏目录