浮动布局——实现网页经典布局
写在前面:勤学勤练,方能实现。浮动布局是一种经典的网页布局方式,它可以代替inline-block,实现将多个块元素置于一行的效果。本文对浮动布局相关知识点进行细叙与总结。重点在于实现浮动布局以及清除浮动布局带来的高度塌陷等影响。
1、浮动的基本语法
定义:
(文档流:元素排版布局中,默认自动从左往右、从上往下流式排列。)
浮动使元素脱离文档流并按照指定方向发生移动,遇到父级边界或相邻的浮动元素时停下来。
float属性:
float属性规定一个元素是否浮动,以及浮动的方向。
float属性的值:
值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认值,元素不浮动,并显示其在文本中出现的位置 |
inherit | 从父元素中继承float属性的值 |
float: left;
2、浮动的特征
1.脱离文档流
通过元素的class值“box”给元素添加相应的float属性,box会脱离文档流,向指定方向浮动。这也意味着box无需占据位置,其他元素按照box不存在的情况进行排列,即会出现另一个元素移动到box元素的位置上。
2.只影响内联元素布局
元素浮动之后,不会影响其他块元素的布局,只会影响内联元素的布局。(利用这个特性可以做出图文环绕的效果)
例如,HTML代码:
<body>
<img src="img/BaiduMap.jpeg" />
<span>百度地图(Baidu Maps)自2005年上线以来,秉持“科技让出行更简单”的品牌使命,
以"科技"为手段不断探索创新,已经发展成为国内领先的互联网地图服务商。
百度地图具备全球化地理信息服务能力,包括智能定位、POI检索、路线规划、导航、路况等。
伴随着AI时代的到来,作为“新一代人工智能地图”,百度地图90%数据生产环节已实现AI化,
智能语音助手累计用户数突破5亿,并上线全球首个地图语音定制功能,让用户出行更具个性化。
百度地图覆盖POI 达1.8亿, 道路里程超1000万公里,刷新了行业新高度。
同时,百度地图是业内拥有丰富全景数据的地图服务商,街道全景已覆盖国内95%的城市,全景照片突破20亿张。</span>
</body>
CSS代码:
img{
width: 10%;
height: 10%;
float: left;
}
效果如下图:
3.块元素在同一行显示
浮动可以取代inline-block的功能,让多个块元素同处一行。
4.默认内容撑开宽度
未设置宽度时,根据块元素的特征,宽度撑满整行。处于浮动状态下的块元素,将默认内容撑开宽度。
5.内联元素支持宽高
未设置浮动的情况下,根据内联元素的特点,所设置的宽高无效,默认内容撑开宽度。给内联元素设置float属性后,内联元素可支持宽高。
补充:BFC
BFC 即 Block Formatting Context 块级格式化上下文。
BFC是每个属性的隐藏样式。BFC是一个独立的布局环境,其中的元素布局不受外界影响。开启BFC的元素具有以下特点:
- 开启了BFC的元素与其父元素的垂直外边距不会发生重叠;
- 开启了BFC的元素会包含其浮动的子元素;
- 开启了BFC的元素不会被浮动元素所覆盖。
要使一个HTML元素触发BFC,满足下列任意一个条件即可:
- float的值不是none;
- position的值不是static或relative;
- display的值是inline-block、table-cell、flex、table-caption或inline-flex;
- overflow的值不是visible。
详细说明可以阅读下面两篇文章:
BFC是什么?10 分钟讲透BFC 原理——来源:传智播客
什么是BFC?看这一篇就够了——来源:CSDN
3、clear属性
clear属性规定元素在某一方向上不允许有其他浮动元素。(一般只作用于块元素)
工作原理:自动为设置了clear属性的元素增加外边距。如果给名为box的元素声明为clear:left,box的上外边框(border-top)的边界将在左侧浮动元素的下外边框(border-bottom)边界之下。
clear属性的值:
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧不允许浮动元素 |
none | 默认值,允许浮动元素出现在两侧 |
inherit | 从父元素继承clear属性的值 |
4、清除浮动
需要清除浮动,是因为浮动布局也存在一些缺陷,例如:
- 当元素浮动时,会脱离文档流;
- 当父级包含框的高度小于浮动框的高度时,会发生高度塌陷
( 高度塌陷:当元素的宽高大于父级元素的宽高,该元素浮动之后由于脱离了文档流,无法撑起父级的高度,父级元素的高度将变为0,称为页面发生高度塌陷。)
高度塌陷现象:
清除浮动后效果:
清除浮动带来的影响的方法:
1.给浮动元素的父级设置高度
给浮动元素的父级设置与它相等(或大于)的高度。但这种方法存在一些缺点:一是不知道子元素高度时无法操作;二是可扩展性差,在父元素中添加其他内容时,父元素的高度也会发生变化。
2.给浮动元素的父级添加CSS样式float:left
给浮动元素的父级添加CSS样式float:left,为父级开启BFC。但是这种方法看似撑开了父级的高度,但并不能完全解决问题,因为父级的父级也会同样面临高度塌陷的问题。此外,这两个元素浮动之后会脱离文档流,其他元素会顶替它们的位置,造成页面混乱。
3.给浮动元素的父级添加CSS样式overflow:hidden
给浮动元素的父级添加CSS样式overflow:hidden,为父级开启BFC。overflow属性规定,当内容溢出元素框时隐藏溢出的内容,解决高度塌陷的问题,但有时会影响元素的样式。
4.使用伪类清除浮动
在浮动元素后(父级元素中)添加一个带有clear:both属性的没有内容的块元素(可以是div、br等元素)即可清除浮动。
方案一:在浮动元素下面创建一个div元素,设置clear:both,解决父级元素高度塌陷的问题。
HTML代码:
<body>
<div class="box">
<img src="img/BaiduMap.jpeg" />
<div class="block"></div>
</div>
</body>
CSS代码:
img{
float: left;
}
.box{
border: 10px solid #55AAFF;
}
.block{
clear: both;
}
方案二:伪类清除浮动——万能清除法
CSS伪元素用于向某些选择器设置特殊效果,CSS 伪元素有以下4类:
CSS伪元素:
属性 | 描述 |
---|---|
:first-letter | 向文本中第一个字母添加特殊样式 |
:first-line | 向文本中首行添加特殊样式 |
:before | 在元素之前添加内容 |
:after | 在元素之后添加内容 |
利用伪元素:after解决高度塌陷问题,如下代码:
HTML代码:
<body>
<div class="box clearfix">
<img src="img/BaiduMap.jpeg" />
</div>
</body>
CSS代码:
img{
float: left;
}
.box{
border: 10px solid #55AAFF;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
这种方法知识将方案一中的div标签改用:after创建的伪元素,同样是clear:both清除浮动。但这种方法遵循了W3C标准中的结构、样式、行为三者分离的要求。
5、实战练习(导航栏布局)
翻篇,下文再作。 😁