10 - 浮动

最新推荐文章于 2023-08-18 15:44:51 发布

xyyojl

最新推荐文章于 2023-08-18 15:44:51 发布

阅读量158

点赞数

分类专栏：前端 html+css 文章标签：标准文档流 float 清除浮动七届层叠水平 min-width

本文链接：https://blog.csdn.net/xyyojl/article/details/82619876

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html+css

21 篇文章 0 订阅

订阅专栏

浮动float

css标准文档流布局
脱离文档流
浮动float是什么?
浮动的特性与对文字的影响
与inline-block的对比
清除浮动的意义与解决办法
min-width的运用

css标准文档流布局

页面布局的默认状态

特点:从左到右从上往下流式排列,最终窗口自上而下分成一行一行,每行从左往右顺序(依代码)排放元素,块元素独占一行,内联元素并列。

脱离文档流

将元素从标准文档流的布局中拿出,其他元素(块级)在文档流的布局的位置会无视脱离文档流的元素,但是浮动的元素会排挤文字

涉及到七阶层叠水平

浮动的元素和文字/行内/行内块势不两立,对文字/行内/行内块元素的影响,会感受到浮动元素的存在

例子:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body{
                margin: 0;
            }
            .fl{
                float: left;
            }
            .s100{
                width: 100px;
                height: 100px;      
            }
            .s200{
                width: 200px;
                height: 200px;        
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class='box'>
            <div class='red s100 fl'></div>
            <div class="blue s200"></div><!--前面那个元素浮动的话,块级元素会在那个元素的下面-->
        </div>
    </body>
</html>

浮动float是什么?

浮动就是为了解决文字环绕而存在的,现在我们在做页面布局的时候使用的最多的就是浮动来进行页面的布局了,但是有违与布局的初衷

浮动是使元素不完全脱离文档流(脱离块级的文档流,没有脱离文本的文档流),按照指定方向发生移动,遇到父级边界或相邻元素(浮动的元素)就停下来,后续元素会无视浮动元素,但是文本/行内/行内块不行,文本遇到浮动元素会环绕排列,保持部分流动性。

简单来说,给某个盒子加上浮动,就会把盒子给拿起来了,飘起来了,但是盒子飘起来的话,还是占有一个位置,对它之后的元素(行内元素,行内块元素)还是有影响的。有个特殊的情况:浮动元素不能挤完整的一行,只能挤文字比较少的最后一行,当最后一行的文字不够多,浮动的元素会挤上去一行,不能挤块级元素和文字比较多的最后一行

例子说明:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小demo</title>
    <style>
        body,p{
            margin: 0;
        }
        .fl{
            float: left;
        }
        .box{
            width: 300px;
            border: 1px solid #000;
        }
        .s100{
            width: 100px;
            height: 100px;
        }
        .s60{
            width: 60px;
            height: 60px;
        }
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进
        <div class="red s100 fl"></div>
    </div>
</body>
</html>

浮动float写法

none 默认值,不具有浮动特性
left 向左浮动,元素必须浮动在所在块左侧
right 向右浮动,元素必须浮动在所在块右侧

为什么浮动的元素不会被文字挤下去?

文字在上面,浮动元素在下面

排列特性: (多个)

每个浮动元素都遵循之前的规律

浮动的元素之间会靠浮动方向排列,相互之间类似于文本排列方式,当前行不够会换行显示

不够位置的话,盒子会被挤下来

例子:当浮动元素父级宽度不够,浮动元素掉下来,浮动元素往下掉,前面的浮动元素高出普通元素,就会被卡住

这里写图片描述

文字的排列:文字自己找找看,有没有放下自己的位置,文字是见缝插针

包裹性与块状格式化上下文

包裹性:宽高有里面的元素撑开,默认就是没有宽高

块状:元素会强行变成块元素display:block;其余设置会失效,元素具有块元素部分性质,可设置宽高

格式化上下文: 形成BFC,内部margin 无法穿透与合并

特点:浮动元素会强行被变成块元素,破坏文档流

父级高度塌陷

clear:清除浮动

left: 左侧清除浮动
right: 右侧清除浮动
both:两边都清除浮动,相当于把上面两个合并
none:不清除浮动

默认情况下父元素会因为内部的元素撑起来,但是浮动的元素破坏了正常的文档流,父元素感受不到他的存在,所以子元素不会再撑开,造成父元素高度塌陷

解决办法:

给父元素添加高度(不推荐)

缺点:只适合固定高度的元素
给最后一个元素添加一个空标签,清除浮动

clear:both

在任何情况下都可以代替clear:left/right,由于浮动只有一边(要么left/right),所以清除只能清除一边,不能清除两边。

元素盒子的边不能和前面的盒子的边
给父元素加overflow:hidden,原理是什么?方便个人理解:七层都要进行判断,感受到来自上层世界的位置关系,找到不听话的子元素,然后包裹起来
使用伪元素(父元素,几乎完全兼容,没有任何毛病)

/*每一个元素都具有一对伪元素*/
.clearfix:after{
    content: '';/* 一定要写,即使没有内容 */
    clear: both;
    display: block; /* 如果是使用了定位,可以不写这个,因为这个的目的是是该伪元素变成块级元素 */
    overflow: hidden;/* 超出隐藏 */
    height: 0;
    font-size: 0;
}
.clearfix{
    zoom: 1;
}