CSS float相关介绍入门基础知识_float指南教程

一、float介绍float元素也称为浮动元素,设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。简单来说,就是让block元素无视float元素,让inline元素让流水一样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景,如下所示:h

CSS float相关介绍入门基础知识

一、float介绍

CSS float相关介绍入门基础知识_float指南教程

float元素也称为浮动元素,设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。简单来说,就是让block元素无视float元素,让inline元素让流水一样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景,如下所示:

CSS float相关介绍入门基础知识_float指南教程

html代码

<img class="float" src="image/HC5450_15-IMS-zh_CN.jpg" />
<p class="around">华夏之大,有造物之工师,兼创器之良匠,留下传世之美。有些器物,不仅仅需要玻璃罩的保护,更需要心手合一的把玩。摩挲盘桓,实为栖心之境。古而近雅,追求老器物绝不是一味的泥古,而是追求内心的安定,古物经历过时间,消除了火气,更显得雍穆沉静。不入古境,不解其情,若入古境,自得况味,这便是时间的艺术。</p>

css代码

.float{
  float:left;
  width:100px;
  height: auto;
  margin: 10px;
}
.around{
  width:300px;
  color:#fff;
  background: #009F95;
  padding: 10px;
}

由上图可以看出,img元素设置了float:left之后会脱离文档流而居于左侧存在。而p元素无视img元素的存在,从窗口的左上角开始流入,但是p元素中的文字意识到img元素的存在而环绕图片流入。并且img元素是漂浮在p元素的上层。

二、float元素特性

1.块级框

不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

(1)先来看一个块级元素的例子:

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="div1">
  <img src="image/pic1.png" />
</div>
<div class="div2">
  <img src="image/pic2.png" />
</div>

css代码

.div1{
  padding: 10px;
  border: 3px solid black;
}
.div2 {
  float: left;
  padding:10px;
  border: 3px solid red;
}

默认情况下,div元素的宽是100%,一旦让该div浮动起来,立刻会像inline元素一样产生包裹性,宽度会跟随内容自适应。

(2)接着看下行内元素的例子:

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="box">
  <span class="menu">首页</span>
  <span class="menu">消息</span>
  <span class="menu">朋友</span>
  <span class="menu">我的</span>
</div>

css代码

.box{
  width: 500px;
  background: pink;
  height: 200px;
}
.menu{
  width: 100px; 
  float: left; 
  margin: 10px; 
  padding: 10px; 
  background: #eee; 
  text-align: center; 
}

由上图可见,当span设置float属性后,可以指定width,height值。 同时可以发现,当多个元素指定为float且同时为left/right时,元素是紧挨着排列,行内宽度不够时再换行排列。

2.高度崩塌

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="div1">
  <img src="image/pic1.png" />
</div>
<div class="div2">
  <img src="image/pic2.png" />
</div>

css代码

.div1{
  padding: 10px;
  border: 3px solid black;
}
.div2 {
  border: 3px solid red;
}
.div2 img{
  float: left;
  padding:10px;
}

将float属性设置给div2内部的img元素,可以看出div2的高度并没有img元素被撑起来,因此又叫高度崩塌。

原因:将img元素设置为浮动元素,所以脱离文档流。因此div2中认为没有元素,所以产生了高度崩塌。具体怎么解决高度崩塌,后面再介绍。

三、clear属性

clear属性的作用是清除浮动。

 clear : none | left | right | both;

 none  :  默认值。允许两边都可以有浮动对象

 left   :  不允许左边有浮动对象

 right  :  不允许右边有浮动对象

 both  :  不允许有浮动对象

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="bg1"></div>
<div class="bg2"></div>

css代码

.bg1{
  width:200px;
  height: 200px;
  border: 3px solid black;
  background: url(image/pic2.png);
  float: left;
}
.bg2{
  width:500px;
  height: 300px;
  border: 3px solid red;
  background: url(image/pic1.png);
}

如上图所示,由于bg1是浮动元素,所以bg2在bg1底层铺展。

如果想要让bg2换行排列,居于bg1底端下方(如下图),这个时候就要用到clear属性了。

CSS float相关介绍入门基础知识_float指南教程

css代码中,只需要在bg2中加入 clear:left 即可

.bg1{
  width:200px;
  height: 200px;
  border: 3px solid black;
  background: url(image/pic2.png);
  float: left;
}
.bg2{
  width:500px;
  height: 300px;
  border: 3px solid red;
  background: url(image/pic1.png);
  clear: left;
}

对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

CSS float相关介绍入门基础知识_float指南教程

以上图例子说明。bg1和bg2都设置了float:left。如果在bg1样式中添加样式clear:right,来迫使bg2下移,则没有任何效果。因为这个清除浮动是在bg1中调用的,她只能影响bg1,不能影响到bg2。

要想要bg2下移,就必须在bg2的样式中使用浮动 clear:left。用来指定bg2元素左边不允许出现浮动元素。

四、BFC

1.BFC的介绍

定义:

一些元素,如float元素,如position为absolute,block为inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素,它们将会建立一个新的块级格式化上下文(Block Formatting Context),也就是我们所说的BFC。

形成

BFC也是HTML中的一个盒子(看不见而已),只有满足至少下列条件之一才能形成BFC:

① float属性不为none.

② position属性不为static和relative.

③ display属性为下列之一:table-cell,table-caption,inline-block, flex,inline-flex.

④ overflow属性不为visible.

布局规则

① 内部的Box会在垂直方向,一个接一个地放置。

② Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

③ BFC的区域不会与float box重叠。

④ BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

⑤ 计算BFC的高度时,浮动元素也参与计算。

2、BFC的作用

(1)容纳浮动元素

就是解决上面遇到的高度崩塌问题。

CSS float相关介绍入门基础知识_float指南教程

只需要将div2的css代码改动一下,增加一个BFC来容纳浮动元素。

.div1{
  padding: 10px;
  border: 3px solid black;
}
.div2 {
  overflow:hidden;
  border: 3px solid red;
}
.div2 img{
  float: left;
  padding:10px;
}

除此之外,解决高度崩塌问题,还有如下解决方法:

增加一个清除浮动的子元素

html代码

<div class="div1">
  <img src="image/pic1.png" />
</div>
<div class="div2">
  <img src="image/pic2.png" />
  <div style="clear:both"></div>
</div>

(2)阻止文本换行

大多数情况(若没有特殊设置),如Figure1,文本将会环绕浮动元素,但有时候这并不是我们期望的。我们期待的是Figure2如图:

CSS float相关介绍入门基础知识_float指南教程

想达到图二的效果,只需要将右边文字区域变成一个BFC即可。

CSS float相关介绍入门基础知识_float指南教程

css代码如下:

.float{
  float:left;
  width:100px;
  height: auto;
  margin: 10px;
}
.around{
  width:300px;
  color:#fff;
  background: #009F95;
  padding: 10px;
  overflow: hidden;
}

(3)消除Margin Collapse (外边距坍塌)

在正常情况下,在一个容器内的所有box将会由上至下依次垂直排列,即我们所说的一个元素占一行,并切垂直相邻的距离(即margin)是由各自的margin决定的,而不是两个margin的叠加。

让我们看一个例子:

CSS float相关介绍入门基础知识_float指南教程

HTML代码:

<div class="container">
  <p>list 1</p>
  <p>list 2</p>
  <p>list 3</p>
</div>

css代码:

.container {
  width: 300px;
  background-color: black;
  overflow: hidden;
}
p {
  background-color: white;
  margin: 20px 0;
  text-align: center;
}

理想情况下,我们会认为p标签之间的margin应该是它们的和(20px*2=40px),但实际上却是20px.这其实是collapsing margins(外边距坍塌)。其中flex布局不存在collapsing margins,水平方向上也不存在collapsing margins。

利用BFC能消除collapsing margins。紧记只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin collapse。因此我们可以再建立一个BFC去阻止margin collpase的发生。

所以为了让他们的margins变成40px,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。

CSS float相关介绍入门基础知识_float指南教程

html代码:

<div class="container">
  <p>list 1</p>
  <p>list 2</p>
  <div class="newBFC">
	<p>list 3</p>
  </div>
</div>

css代码:

.container {
  width: 300px;
  background-color: black;
  overflow: hidden;
}
p {
  background-color: white;
  margin: 20px 0;
  text-align: center;
}
.newBFC {
  overflow: hidden;
}
海计划公众号
(0)
上一篇 2020/03/23 18:37
下一篇 2020/03/23 18:37

您可能感兴趣的内容

  • 微信小程序连接蓝牙硬件的实现入门教程_小程序使用帮助

    项目需要使用小程序的蓝牙功能与硬件设备进行连接相互传送数据指令 ,首先说下流程: openBluetoothAdapter(初始化蓝牙适配器)—》 wx.startBluetoothDevicesDiscovery(开始搜寻附近的蓝牙外围设备)——》wx.getBluetoothDevices(获取所有已发现的蓝牙设备)——》wx.createBLEConn

    2020/04/03
  • node-formidable小白知识_一个Node.jsform数据解析模块

    node-formidable小白知识 GitHub:https://github.com/felixge/node-formidable 简介描述:一个Node.jsform数据…

    2020/03/06
  • Js数组排序攻略教程_排序菜鸟知识

    sort() 方法是最强大的数组方法之一。数组排序sort() 方法以字母顺序对数组进行排序:实例var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
    fruits.sort(); // 对 fruits 中的元素进行排序反转数组reverse() 方法反转数组中的元素。您可以使用它以

    2020/03/23
  • vue watch对象内的属性监听小白基础_watch使用指南

    watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ‘ ‘ + this.lastName;},// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法immediate: true}
    }
    //复制代码注意到handler了吗,我们

    2020/03/24
  • 前端为什么学node.js?菜鸟指南_学习小白入门

    前端为什么学node.js?下面本篇文章就来给大家具体介绍一下前端为什么学习node.js?希望对大家有所帮助。前端为什么学node.js?1、求职需要随着互联网的高速发展以及市场需求推动,Node已经成为前端知识栈必备技能之一,很多企业在招聘中也会着重考察求职者对Node的掌握程度。2、node.js可以大大提升了开发的性能以及便利我们知道 Apache

    2020/03/22
  • css3动画之两面翻转的盒子小白常识_盒子使用说明

    利用伪元素before、after,只创建一个div

    Title/*先清掉默认的样式*/body {margin: 0;padding: 0;background-color: bisque;}/

    2020/03/26
  • 什么是css sprites(雪碧图),css sprites使用的优缺点小白知识_css小白攻略

    什么是css sprites?css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量css sprites优点:1、减少网页的HTTP请求,提高页面性能2、图片命名上的困扰3、更换风格方便css sprites缺点:1、必须限定容器大小,符合背

    2020/04/03
  • 开发直播软件可能会用到的第三方服务有哪些?小白常识_直播基础教程

    直播软件的开发,虽然现在很多技术都已经趋向成熟,但是有些东西不是仅仅技术就可以实现的,在考虑到时间、成本、风险、功能稳定性等多种因素的情况下,大部分直播平台开发时都会预留第三方服务的接口来节约开发的成本。一、第三方服务器1.CDN在玩游戏或看电影时经常会出现画面撕裂、卡顿等现象,为了解决网络延迟卡顿的问题,就需要用到CDN服务。CDN即内容分发网络,是构建在

    2020/03/23
  • css之background-position属性实现雪碧图小白常识_雪碧图基础入门

    什么是雪碧图雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分。为什么要用雪碧图可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象。用雪碧图有什么弊端个人认为如果你的雪碧图不是很

    2020/03/26
  • 使用node.js实现JSONP的实例攻略教程_jsonp使用帮助

    JSONP与JSON只有一字之差,我们在使用Jquery的Ajax调用的时候也是使用相同的方法来调用,两者的区别几乎只在于使用的dataType这个属性的不同。但是实际上JSON和JSONP是完全不同的两个东西,JSON是一个数据格式,就好像XML一样,JSONP适用于解决远程调用本地回调函数跨域的问题。当指定dataType为JSON的时候,回调函数的参数

    2020/03/29
  • Token ,Cookie和Session的区别入门基础知识_存储使用说明

    在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解。为此我查阅大量的资料做了如下总结。 此篇文章也许是最全最通俗的关于Token ,Cookie和Session的区别的文章,好好揣摩文章的每一个字,也许你会有更深的理解!Cookiecookie 是一个非常具体的东西,指的就

    2020/04/05
  • 前端工程师遇到bug时的5个搞笑反应菜鸟指南_bug入门基础教程

    Bug是程序员常常碰见的,有人会生气,有人会沮丧,有人会心烦意乱,当然啦,也有人会依然保持冷静沉着。那么小编带大家来看看html5前端工程师遇到bug时的10个反应,有些搞笑哦~ 1.“我不知道是要删除还是要重写它”回顾从前老的源代码,会有一种想要返工写成较大块集群的冲动和诱惑。丑陋的逻辑语句,还有冗长的语法,导致代码非常难以阅读!但话又说回来,如果代码没

    2020/03/31
  • 露营之乐小白指南_活动使用教程

    与三五好友在大自然里漫步,找一处风景优美的地点扎营,升起一场令人赞叹的篝火,简直就是人生一大乐事。下面将提供几种很实用的建议,让你的露营之旅更加令人难忘。无论是露营用具或食物,都需要事前精心考虑,筛选不必要的东西或食材,才不会带了过多的行李,影响欣赏风景的兴致;或缺这少那,无法充分享受露营的乐趣。经过一段距离的徒步,当你到达露营点时,你需要升起一场巨大的篝火

    2020/04/03
  • 2018 前端性能检查表基础入门_性能使用教程

    原文地址:https://juejin.im/post/5ac1d117f265da2396128b9f众所周知,性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting),或是各种各样的与 I

    2020/04/05
  • js实现放烟花效果小白知识_效果使用教程

    一个box中,点击其中的任意位置,会有烟花从正下方升起到点击处,并燃放出一圈圆形的烟花。代码如下:首先是布局以及样式:.box{width: 1100px;height: 500px;background: #000;border: 1px solid red;margin: 0 auto;position: relative;overflow

    2020/03/26
  • HTML中文乱码怎么解决?基础知识入门_码使用帮助

    HTML文件乱码一般是因为编码格式不匹配造成的,只要匹配好html文件的编码格式就可。下面是一个中文乱码的html:

    标题

    这是一段测试文本!

    效果图:HTML中的编码方式有三个:gb2312,gbk,utf-8;现在大部分浏览器默认编码的是utf

    2020/03/31