400-650-7353
您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】CSS的标准流、浮动是什么

【Web前端基础知识】CSS的标准流、浮动是什么

  • 发布: Web前端培训
  • 来源:Web前端培训问答
  • 2020-03-25 17:52:25
  • 阅读()
  • 分享
  • 手机端入口

CSS有三种基本定位机制:标准流,浮动,定位,今天小编先给大家介绍一下标准流和浮动。

1、标准流(normal flow):

标准流又被称为“文档流”或“普通流”。

标准流是指文档内元素的流动方向。内联元素从左到右,遇到阻碍换行执行;块级元素独占一行,从上往下排列。

HTML:

CSS:

浏览器:

2、浮动(float):

浮动是指具有标准流属性的元素会脱离标准流的标准控制,移动到其父级元素的指定位置的过程。这种现象我称为脱离标准流,“脱标”。

float有三种属性:

left 元素向左浮动

right 元素向右浮动

none 元素不浮动(默认状态)

HTML

CSS

浏览器:

给第一个子元素的添加浮动属性之后,第一个盒子“脱标”了,浮动在蓝色的盒子之上,并且不会超过父元素的内边距范围,还有一个隐藏的特点就是盒子浮动之后会具有行内块元素的特性,以上可以总结为浮动的特性;

float的特性:

1.浮动的元素不占位置,脱离标准流,影响标准流,漂浮在其他标准流盒子的上面。

2.添加浮动的元素以最近的父级元素进行浮动对齐,但不会超过内边距的范围。

3.添加了浮动的元素,会具有行内块元素的特性。

 

文章“【Web前端基础知识】CSS的标准流、浮动是什么”已帮助

>>本文地址:https://www.ujiuye.com/zhuanye/2020/48533.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME