标准文档流与浮动

最新推荐文章于 2024-04-19 06:05:38 发布
最新推荐文章于 2024-04-19 06:05:38 发布
阅读量268 收藏
点赞数
分类专栏： 前端网页 文章标签： css 浮动 标准文档流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39872341/article/details/99701372
版权

标准文档流

HTML制作网页的时候,要遵循 从左到右,从上到下的顺序

空白折叠现象

存在于文字与图片之间

解决方法: 将这些元素放在一排,紧密相连

高低不齐,底部齐平

不同的元素,大小不一样,但是底部是在同意水平线上的

浮动

标准文档流中只有两个元素: 块级元素和行内元素

多个元素排在同一行: 行内元素特点

给元素设置宽高: 块级元素特点

浮动可以让元素脱离标准文档流, 就可以实现多个元素排在同一行并且可以给元素设置宽高

浮动是通过一个浮动属性来实现的

float: left向左移动, right向右移动

  • 浮动元素脱离标准文档流,不再占用空间
  • 浮动元素的层级比标准文档流里的元素层级高, 会覆盖标准文档流中的元素
  • 浮动元素会向左或者向右浮动

使用浮动之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width:100px;
            height: 100px;
            background-color: red;
        }
        .div2{
            width:100px;
            height: 100px;
            background-color: blue;
        }
        .div3{
            width:100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

使用浮动后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width:100px;
            height: 100px;
            background-color: red;
            /*给这一个元素使用浮动属性*/
            float:right;
        }
        .div2{
            width:100px;
            height: 100px;
            background-color: blue;
        }
        .div3{
            width:100px;
            height: 100px;
            background-color: green;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div> 

    
</body>
</html>

红色块移动到右边, 不再占用空间, 飘起来了

清除HTML标签默认内填充和外边距
 <style>
        *{
            margin:0px;
            padding: 0px;
        }
    </style>
浮动的案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*清除HTML标签默认内填充和外边距*/
        *{
            margin:0px;
            padding: 0px;
        }
        
        .nav{
            width: 960px;
            height: 40px;
            margin-right: auto;
            margin-left: auto
        }

        .nav ul{
            /*项目符号去除*/
            list-style: none;
        }
        .nav ul li{
            /*每一个li标签向左浮动*/
            float: left;
            width: 120px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>

        </ul>
    </div>
</body>
</html>

清除浮动

经过浮动了元素, 会影响到下面的元素的排列布局

浮动元素的父元素没有将浮动元素包裹着

只要清除了浮动,不会影响到浮动元素下面的排版布局,浮动元素的父元素会将浮动元素包裹着

三种方法

  • 给浮动元素的父元素设置一个固定的高度
  • 使用清除浮动的样式属性 clear
  • 使用 overflow:hidden 来清除浮动

设置浮动前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width:100px;
            height: 100px;
            background-color: red;
            
        }
        .div2{
            width:100px;
            height: 100px;
            background-color: blue;
            
        }
        .div3{
            width:100px;
            height: 100px;
            background-color: green;
          
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div> 
    <h2>浮动与清除浮动</h2>
    
</body>
</html>

设置浮动后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width:100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .div2{
            width:100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        .div3{
            width:100px;
            height: 100px;
            background-color: green;
            float:right;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div> 
    <h2>浮动与清除浮动</h2>
    
</body>
</html>

可以看到影响了底下文字的排版布局

使用clear

clear的三个值:

  • clear:left 清除左浮动
  • clear:right 清除右浮动
  • clear:both 两者都清除

这个属性一般用在最后一个浮动元素的下面, 在最后一个浮动元素的下面放一个空白的div, 作用是清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width:100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .div2{
            width:100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        .div3{
            width:100px;
            height: 100px;
            background-color: green;
            float:right;
        }
        /*使用清除浮动样式clear*/
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <!-- 在最后一个元素的下面新建一个空白的div -->
        <div class="clear"></div>
    </div> 
    <h2>浮动与清除浮动</h2>
    
</body>
</html>

使用overflow:hidden

原意是将溢出的部分进行隐藏

小小少年eason
关注
专栏目录
【关于HTML文档标准流和css浮动的详细讲解】
muweichang的博客
05-02 921
什么是浮动标准文档流三微观现象三元素等级浮动认识浮动三级目录 标准文档流 在这里先说一下什么是标准文档流。 标准文档流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。及标签默认的排版方式 标准文档流：指的是元素排版布局过程中，标签的一个“默认”状态。元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 标准文档流的特点：三微观现象、三元素等级 三微观现象 空白折叠现象：无论写多少个空格（或者换行），
【css-文档流与文本流，浮动，定位】
renrenrenrenqq的博客
12-30 754
文章目录1.文档流与文本流1.1文档流的定义1.2文本流的定义1.3脱离文档流2.浮动（float)3.定位3.1定位的定义3.2定位的组成3.3静态定位3.4相对定位3.5绝对定位 1.文档流与文本流 1.1文档流的定义 **文档流通俗来讲是浏览器中的规则，从上到下，从左到右的布局。** 当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行
5.文档流，浮动和定位三者之间的关系
qq_24871849的博客
12-03 230
标准流如同固定在泳池底部，浮动如同漂浮在水面上，而定位则是定在空中；
css定位
m0_51683428的博客
11-01 194
css定位 ​ 定位是指允许定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置. 定位分为两种 : 相对定位(relative) 绝对定位 (absolute) 相对定位 ​ 相对定位相对于自己本身的位置进行移动，并没有脱离文档流,移动后原来的位置还被占用。 ​ 可以通过 position : relative ; 开启相对定位， ​ 用 left ,right ,top, bottom四个属性来设置标签的偏移
文档流和浮动
小小的博客
08-28 406
文档流 浮动（注意:在ie6中浮动后,如果浮动元素上边是一个没有浮动的内联元素,则浮动元素不会超过内联元素元素）   特点 当块元素脱离文档流时 当内联元素脱离文档流时      ...
标准文档流和浮动
webpon
08-09 177
文档流（百度百科） 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序) 详细说明：比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流，也有一些对象是不...
标准流和浮动流相关的理解
11-10
谈谈对标准流和文档流的理解，标准流有叫做普通流和文档流， 浮动流的理解，标准流就是从左到右，从上到下的布局
CSS标准文档流与脱离文档流
最新发布
2401_84097696的博客
04-19 962
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取外链图片转存中…(img-Zx1wKNPQ-1713477872760)][外链图片转存中…(img-QdONf1dK-1713477872760)][外链图片转存中…(img-IuUafAS1-1713477872760)]
css 盒模型 文档流 几种清除浮动的方法实例详解
09-22
CSS盒模型、文档流以及清除浮动是Web布局中至关重要的概念。盒模型定义了元素如何占用空间，而文档流则是页面元素布局的基础。在本文中，我们将深入探讨这些概念，并提供几种清除浮动的方法。 首先，让我们理解盒...
【前端面试之CSS】什么是标准文档流？重点介绍了浮动以及如何清除浮动
阿卡内的博客
07-23 1131
三种文档流重点介绍了浮动以及如何清除浮动
浮动对正常文档流的影响（区分浮动和绝对定位的脱标）
asd18293347341的博客
03-02 1065
浮动对正常文档流的影响（区分浮动和绝对定位的脱标） 问题描述： 一个<div>块元素里 有 两个<span>元素 第一个<span>设置了浮动 那么第二个<span>不应该在 第一个<span>的下面吗？ 结果显示: 两个span是紧挨着的。（源代码和浏览器窗口显示图形如下） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
标准文档流及浮动的元素和坏处
wkx8324183的博客
09-26 271
浏览器的排版是根据元素的特征（块和行级），从上往下，从左往右排版这就是标准文档流。 浮动：float：位置 元素都加浮动，后面的元素会紧跟前面的元素并排排列。，只要加了浮动，就不会受标准文档流的控制。浮动的元素不仅会紧紧贴靠在一起，还会文字环绕。 让元素脱离标准流的方法： 　　　　　　1、浮动float 　　　　　　2、绝对定位position： absolute； ·　　　...
css float文档流,图文详解CSS浮动float与文档流的关系
weixin_33037813的博客
08-03 218
在页面布局时，经常会用到浮动float，但是浮动会脱离标准流，会出现一些意想不到的结果，这篇文章就和大家讲讲，CSS浮动与文档流的关系，有需要的朋友可以参考一下，希望对你有用。所谓文档流，指元素在排版布局的过程中，元素会自动从左到右，从上到下的流式排列。脱离文档流呢，就是元素打乱了这个排列，或是从排版中拿走。说到文档流呢，我们先来说一下元素，每个元素呢，都有display属性。行内元素本身是dis...
position属性和float属性——对文档流的影响和解决
路漫漫其修远兮，吾将上下而求索。
03-08 772
position属性 定义和用法： position属性用于指定一个元素在文档中的定位方式。 top,right,bottom,left属性则决定了该元素的最终位置。 参数 值 描述 absolute 生成绝对定位的元素，相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于根级容器定位 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位 re...
css float浮动样式&文档流
旺旺的博客
06-12 302
1.什么是文档流    一个html文件就是一个文档流。所有元素默认都处于文档流中    在文档流中块元素独占一行，可以设定内容区大小（width，height）            当wdith设置为auto自动时，他将占据整个父元素的宽度。            当将heigh设置为自动是，他的高度有他的子元素的高度撑开   在文档流中内联元素，不能设置内容区的大小（width，height...
HTML | 浮动和定位对文档流的影响
仓鼠学习之旅
04-19 263
作者有话说 大家好！这次带来的是HTML的文档流与浮动布局的简单知识。首先将会给大家科普一下文档流的概念，随后再讲述浮动和定位对文档流的影响问题。让我们开始吧！ 1.文档流 什么叫文档流？简单来说，就是指元素在页面中出现的先后顺序。一个正常的文档流，会将一个页面从上到下分成一行一行的，其中像div的块级元素会独占一行，像span的行内元素会在一行中水平排列。 讲完了文档流，我们来将脱离文档流，正...
position、float与文档流
GuoZebin的博客
11-24 473
1.什么是文档流？ 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序) 2.position 概述： position定位，它的作用就是把元素放到你想放的位置上。在css中牵扯到位置定位的一般就会有一个参照，position也不例外，它的取值有三个：...
html 浮动脱离文档流,CSS标准文档流与脱离文档流
weixin_29915703的博客
06-03 295
标准文档流文档流：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。标准流的微观现象：空白折叠现象：在 html 文件输入文本，多个空格会被合并成一个空格显示到浏览器页面中。这种现象称为空白折叠现象。高矮不齐，底边对齐：文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会...
css float和absolute脱离文档流的问题
wangshang1320的博客
02-28 1745
CSS中的布局默认是从上到下（块元素），从左到右（行内元素），有时候就需要左右排列 float 让元素浮动，以前用的比较多，在css3没出来之前这个挺好用的。让当前元素浮动，实现左右布局，部分脱离文档流，父元素高度塌陷等，给元素设置了float属性后其紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围 float：letf|right...
CSS布局：标准流与浮动流详解
当一个元素浮动时，它会移出正常文档流，其他未浮动的元素会填充其腾出的空间，而下一行的元素则会继续沿标准流进行排列，直到遇到浮动元素或者文档结束。 例如，`<span class="box2">`和`<span class="box3">`之间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值