css浮动（float）

最新推荐文章于 2024-07-19 15:50:46 发布

酥脆角

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量61

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_70134200/article/details/129455442

版权

一、传统网页布局的三种方式

网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。

CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）。

普通流（标准流）

浮动

定位

这里指的只是传统布局，其实还有一些特殊高级的布局方式

二、标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1.块级元素：从上往下，垂直布局，独占一行

2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

三、浮动

为什么需要浮动1

想要把多个块级元素放在一行显示,打破常规布局.

使用行内块元素布局页面有一定的局限性,中间会有空白间隙.

实际开发中盒子之间间隙会有严格的要求。

浮动的语法

float: left;
float: right;

浮动的特点

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：一行可以显示多个并且可以设置宽高

浮动布局注意事项:

1.浮动一般情况下和标准流的父盒子一起搭配使用.

        先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2.浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?

        浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动.

        一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

        浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

（一浮全浮子浮父不浮兄弟一起浮）

浮动的案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .header {
            height: 40px;
            background-color: #333;
        }

        .box {
            width: 1226px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

        .banner {
            width: 1226px;
            height: 460px;
            background-color: red;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>

<body>
    <header class="header"></header>
    <div class="box"></div>
    <div class="banner">
        <div class="left"></div>
        <div class="right">
        </div>
    </div>
</body>

</html>

运行结果

四、（扩展）清除浮动

刚刚才介绍完浮动这又讲个扩展是清除浮动，你一定很不理解吧，听我慢慢来给你说为什么。

为什么要清除浮动

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,

原因:子元素浮动后脱标 → 不占位置

目的:需要父元素有高度,从而不影响其它网页的布局

清除浮动的方法

给父元素设置高度。

额外标签法

单伪元素清除法

单伪元素

.clearfix::after {

content: '';

display: block;

clear: both;

补充代码

height: 0;

隐藏

visibility: hidden;

}

双伪元素清除法

双伪元素

.clearfix::before,

.clearfix::after {

content: '';

display: table;

}

.clearfix::after {

clear: both;

}

给父元素设置 overflow: hidden;

（清除浮动是为了更好的给页面布局，清除浮动既能使元素使用浮动的特性又不会出现撑不开标准流的块级元素的情况）

酥脆角

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css浮动（float）

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动。浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示。2.浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素。3.一个元素浮动了，理论上其余的兄弟元素也要浮动.
复制链接

扫一扫