分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

给你讲讲前台页面布局中float的那些事

  • 时间:2018-11-06 23:15 作者:码农视界 来源:码农视界 阅读:368
  • 扫一扫,手机访问
摘要:写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比方说下面这些地方都是应用到了浮动。在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。一、浮动的定义使元素脱离文档流,按照指定的方向(左或者右发生移动),直到它的外边缘碰到包含框或者另一个浮动框的边框

写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比方说下面这些地方都是应用到了浮动。

在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。

一、浮动的定义

使元素脱离文档流,按照指定的方向(左或者右发生移动),直到它的外边缘碰到包含框或者另一个浮动框的边框为止。

说到脱离文档流要说一下什么是文档流,文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。

二、属性

float:left; 左浮动

float:right;右浮动

三、浮动的情况

下面我就用这个布局为例子来讲解浮动,css样式外面的div给了一个高度,其余的不多说。

给你讲讲前台页面布局中float的那些事

给你讲讲前台页面布局中float的那些事

1.左浮动float:left;

给里面的三个p标签 float:left; 属性,看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展现的,但是看下图会发现他们按照顺序排列成一排了。

给你讲讲前台页面布局中float的那些事

2.右浮动 float:right;

同样的我们给box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。

给你讲讲前台页面布局中float的那些事

3.这一次我们只给第二个p浮动来看看会发生什么情况,这时候你会发现,3不见了,他其实在2的下面,我给3一个宽一点的宽度。会发现3在2的下面。

给你讲讲前台页面布局中float的那些事

给你讲讲前台页面布局中float的那些事

4.给3一个浮动

他会没有什么变化,由于浮动只会影响他后面的元素,假如上面的元素不浮动,他也不会上去的

给你讲讲前台页面布局中float的那些事

5.把外面的div宽度变小少量,p浮动

假如父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示。

给你讲讲前台页面布局中float的那些事

6.浮动的特殊情况

以换行的那个元素为基准,假如有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素"卡住"。初始样式是左图.

给你讲讲前台页面布局中float的那些事

给你讲讲前台页面布局中float的那些事

7.浮动对文字的影响 给p标签浮动

浮动框只会占据自己的位置,使文字可以围绕浮动框显示

给你讲讲前台页面布局中float的那些事

四、浮动之后有很多特性

1.块级元素可以横排显示

2.行内元素可以设置宽度和高度

3.元素没有设置宽度和高度时,宽度为内容撑开宽

4.支持margin

5.脱离文档流

6.提升半层级

问题:不支持margin:auto;

五、清理浮动

1. 为什么要清理浮动?

前面提到了我给了外面的div一个高度,这里我们不给他高度,让里面的p浮动看看会发生什么情况。

未浮动

给你讲讲前台页面布局中float的那些事

浮动之后

给你讲讲前台页面布局中float的那些事

我们会发现子元素浮动会造成父级盒子高度坍塌,这样假如下面在进行继续布局的话会使页面布局错乱,(下图中黄色的盒子是nav下的div)假如想要继续布局就要清理浮动了,这里我详情几种清理浮动的方法。

标签和样子如下两幅图

给你讲讲前台页面布局中float的那些事

给你讲讲前台页面布局中float的那些事

父级的做法

1. 父级 紧邻兄弟法

给nav一个clear:both属性,下图会发现可以正常显示

缺点:只是让后面的元素正常显示,并没有撑开box的高度

给你讲讲前台页面布局中float的那些事

2.父级给高度

box给高度,可以正常显示。

缺点:一般都是元素内容撑开高度,拓展性不好。

给你讲讲前台页面布局中float的那些事

3.父级元素 display:inline-block;

box给display:inline-block;可以正常显示

缺点:父级盒子margin:auto;失效,会发现上部分和下面黄色中间有间隙。

给你讲讲前台页面布局中float的那些事

4.父级overflow:hidden;

可以正常显示

缺点:需要配合宽度

给你讲讲前台页面布局中float的那些事

子元素

1.要加给浮动元素末尾的后面再增加一个元素。加上一个clear属性

可以正常显示

缺点:随便的增加一个空元素,不符合代码规范

给你讲讲前台页面布局中float的那些事

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部