08---HTML+CSS---float浮动

最新推荐文章于 2023-04-15 23:40:51 发布

好大的汪汪

最新推荐文章于 2023-04-15 23:40:51 发布

阅读量175

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/chishuiss/article/details/79193501

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

文档流：

文档中可显示对象在排列时所占用的位置。自上而下，自左到右的排列。

特性：

浮动的元素会脱离文档流

好处：

块级元素可以排列在同一行，能节省空间。

浮动之后：

原本被浏览器解析的空格消失了----空格也相当于文本，效果同文字环绕，所以空格在最后面
父元素塌陷----脱离文档流之后，无法撑开父元素
使元素块级化

浮动的值（两个）：

float:left;
float:right;

浮动的最初目的——文字环绕：

（1）不浮动

<head>
    <style>
        #n1{
            width:300px;
            height:300px;
            border:1px solid orange;
        }
        #n1 div{
            width:80px;
            height:80px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="n1">
        <div></div>
        在九月 潮湿的车厢你看着车窗
        窗外它 水管在开花
        椅子在异乡
        树叶有翅膀
        上海的街道
        雪山在边上
        你靠着车窗
        我心脏一旁
        我们去哪
        你看那 九点钟方向
        日内瓦湖的房子贵吗
        世界上 七千个地方
        我们定居哪
        知道嘛 今天的消息
        说一号公路上
        那座桥断了
        我们还去吗
        要不再说呢
        会修一年吧
        一年能等吗
        你还去吗
        你喜欢吗
    </div>
</body>

网页显示：

9-1

（2）浮动

<head>
    <style>
        #n1{
            width:300px;
            height:300px;
            border:1px solid orange;
        }
        #n1 div{
            float:left;
            width:80px;
            height:80px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="n1">
        <div></div>
        在九月 潮湿的车厢你看着车窗
        窗外它 水管在开花
        椅子在异乡
        树叶有翅膀
        上海的街道
        雪山在边上
        你靠着车窗
        我心脏一旁
        我们去哪
        你看那 九点钟方向
        日内瓦湖的房子贵吗
        世界上 七千个地方
        我们定居哪
        知道嘛 今天的消息
        说一号公路上
        那座桥断了
        我们还去吗
        要不再说呢
        会修一年吧
        一年能等吗
        你还去吗
        你喜欢吗
    </div>
</body>

网页显示：

9-2

左浮动：

<head>
    <style>
        *{margin:0;padding:0;}
        #n1{
            width:200px;
            height:200px;
            border:1px solid orange;
        }
        #n1 div{
            float:left;
        }
    </style>
</head>
<body>
    <div id="n1">
        <div style="width: 50px;height: 150px; background-color: pink;">1</div>
        <div style="width: 50px;height: 130px; background-color: pink;">2</div>
        <div style="width: 50px;height: 110px; background-color: pink;">3</div>
        <div style="width: 50px;height: 90px; background-color: pink;">4</div>
    </div>
</body>

网页显示：

9-3

右浮动：

<head>
    <style>
        *{margin:0;padding:0;}
        #n1{
            width:200px;
            height:200px;
            border:1px solid orange;
        }
        #n1 div{
            float:right;
        }
    </style>
</head>
<body>
    <div id="n1">
        <div style="width: 50px;height: 150px; background-color: pink;">1</div>
        <div style="width: 50px;height: 130px; background-color: pink;">2</div>
        <div style="width: 50px;height: 110px; background-color: pink;">3</div>
        <div style="width: 50px;height: 90px; background-color: pink;">4</div>
    </div>
</body>

网页显示：

9-4
补充1：

<head>
    <style>
        *{margin:0;padding:0;}
        #n1{
            width:200px;
            height:200px;
            border:1px solid orange;
        }
        #n1 div{
            float:left;
        }
    </style>
</head>
<body>
    <div id="n1">
        <div style="width: 50px;height: 150px; background-color: pink;">1</div>
        <div style="width: 50px;height: 130px; background-color: pink;">2</div>
        <div style="width: 50px;height: 110px; background-color: pink;">3</div>
        <div style="width: 50px;height: 90px; background-color: pink;">4</div>
        <div style="width: 50px;height: 90px; background-color: purple;">5</div>
    </div>
</body>

网页显示：

9-5
结果解释：

5会被3卡住。

补充2：

<head>
    <style>
        *{margin:0;padding:0;}
        #n1{
            width:200px;
            height:200px;
            border:1px solid orange;
        }
        #n1 div{
            float:left;
        }
    </style>
</head>
<body>
    <div id="n1">
        <div style="width: 50px;height: 150px; background-color: pink;">1</div>
        <div style="width: 50px;height: 130px; background-color: pink;">2</div>
        <div style="width: 50px;height: 110px; background-color: pink;">3</div>
        <div style="width: 50px;height: 90px; background-color: pink;">4</div>
        <div style="width: 50px;height: 90px; background-color: purple;">5</div>
        <div style="width: 50px;height: 90px; background-color: purple;">6</div>
    </div>
</body>

网页显示：

9-6
结果解释：

6被5的高度卡住。其实和上面同理。

父容器塌陷解决（清除浮动）：

1、父容器也浮动----包裹
2、给父容器加一个溢出隐藏overflow:hidden;----包裹（被隐藏的东西就不会影响外界，起屏蔽作用，变成一个独立的空间，但里面超出去的字会看不到）
3、清除浮动----浮动依然存在，但让浏览器保留原来文档流的排列

上面两种方法看情况，不推荐。以后子元素有浮动，给父元素加clearfix，不让父元素塌掉。

第三种清除浮动的其中两种方法：

一般都会要清除，清除的目的就是为了不让父元素塌掉，不塌就行。

（1）添加一个元素（不需要在页面上展示）：

<head>
    <style>
        .clearfix:clear:both;
        <!--clearfix:clear:left;
        .clearfix:clear:right;-->.
    </style>
</head>
<body>
    <div class="clearfix"><div>
</body>

（2）伪元素：（通常使用这种方法）

#fu::after{
  content:"";
  display:block;
  clear:both;
}

好大的汪汪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
08---HTML+CSS---float浮动

文档流：文档中可显示对象在排列时所占用的位置。自上而下，自左到右的排列。特性：浮动的元素会脱离文档流好处：块级元素可以排列在同一行，能节省空间。浮动之后：原本被浏览器解析的空格消失了----空格也相当于文本，效果同文字环绕，所以空格在最后面父元素塌陷----脱离文档流之后，无法撑开父元素使元素块级化浮动的值（两个）：float:left;f
复制链接

扫一扫