浮动之后的那些事儿 - 清浮动操作
本文内容概要:
1 上周作业讲解
2 浮动之后的特性
3 如何清浮动
4 实例操作
上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签的样式,同时通过盒模型为每个标签设置了大小与位置,最后为了让多个块元素展示在同一行,我们讲解了浮动操作。那今天我们继续浮动这个话题,来讲讲浮动之后发生的那些事~~~
一、上周作业讲解
在讲解前,我们一起来看看上周留给大家的作业,相信大家参照上周的知识点都可以把作业布局出来,那我们一起来看看这个作业具体是怎做出来的。如果想了解作业的参考答案,请前往GitHub:https://github.com/iceswan/htmlDemo/tree/master/homework/%E6%B5%AE%E5%8A%A8%E4%BD%9C%E4%B8%9A%E8%AE%B2%E8%A7%A3%20-%20HTML5%E5%AD%A6%E5%A0%82
代码效果如下:
参照上面的代码,我们就完成了上周的作业了,但是这时候我们倘若打开浏览器的控制台去查看每一个块的样式的时候,会发现一个比较奇怪的想象,我的类名为wrap的父级div里面明明放了那么那么多的块,怎么我的高度变成了0了,这到底是怎么一回事啊?继续看下去就明白啦~~~
父级高度为0的效果如下:
二、浮动之后发生的那些事
浮动会导致当前元素脱离文档流,此时会对父级产生影响;
子元素浮动,父级元素会出现高度为0的现象,这个现象叫做高度塌陷;即是上图所看到的父级高度为0的效果。
我们说这时候可以为父级标签添加固定高度,但是在实际开发当中我们希望内容能够撑开高度。对于不浮动的元素来说,它们是能够撑开外部div的高度的,但是一旦浮动,也就意味着元素脱离文档流,父级div就相当于没有了内容。这时是没有办法实现内容撑开高度的。此时我们需要进行清除浮动对布局造成的一系列影响,简称:清浮动。所以接下来我们主要讲解的就是清浮动的几种方法以及各方法的优缺点了。
三、 清浮动的语法
我们要讲解清浮动,那必然要先看看清浮动的语法到底是怎么写的。
清浮动的基本语法:
clear: left | right | both | none | inherit;
代码解释:
left:在左侧不允许浮动元素。
right:在右侧不允许浮动元素。
both:在左右两侧均不允许浮动元素。
none:默认值。允许浮动元素出现在两侧。
inherit:规定应该从父元素继承 clear 属性的值。
四、 清浮动操作
了解了主要的清浮动语法之后,我们主要要来看看清浮动的方法具体有哪些,都是怎么去书写的。
今天我们主要讲解的清浮动方法有:空标签清浮动、br标签清浮动、父级div设置overflow属性、父级元素设置浮动、after伪元素清浮动。接下我们就一起来把这些方法一个个的掰扯清楚来吧。
1 空标签清浮动
所谓的空标签清浮动就是使用一个空的没有存放任何内容的标签来书写清浮动的语句,具体代码如下:
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clear {
clear: both;
/*消除默认行高的影响*/
height: 0;
}
</style>
<div class="wrap">
<div class="main">
<div>梦幻雪冰</div>
<div>独行冰海</div>
<p class="clear"></p>
</div>
<div class="footer"></div>
</div>
代码解释:
clear:both是清除浮动的方法,height:0防止默认高度影响。
优点:通俗易懂,容易掌握。
缺点:会添加大量无语义空标签,结构与表现未分离,不利于维护。
使用:在浮动元素末尾加一个任意空标签,空标签设置clear:both和height:0;
2 br标签清浮动
借助单标签br来实现清浮动,具体代码书写如下:
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
<div class="wrap">
<div class="main">
<div>HTML5学堂</div>
<div>H5Course</div>
<!-- br标签自带的属性 -->
<br clear="all" />
</div>
<div class="footer"></div>
</div>
代码解释:
优点:比空标签方式语义稍强,代码量少。
缺点:结构与表现未分离,不推荐。
使用:br标签清除浮动类似空标签清浮动,同样在float元素后面加一个br标签,只不过br存在一个属性clear只要将br标签里的clear属性设置成all即可。如: clear="all"。
3 父元素设置overflow:hidden/auto
给父级div设置overflow,书写hidden或者auto属性值即可用于清浮动操作,代码如下:
<style>
.main {
overflow: auto / hidden;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
<div class="wrap">
<div class="main">
<div>HTML5学堂</div>
<div>H5Course</div>
</div>
<div class="footer"></div>
</div>
代码解释:
优点:语义化没问题,同时代码量少。
缺点:内容多的时候,会被隐藏,无法显示需要溢出的元素。
使用:在父级设置一个overflow:hidden即可。注意一点,不是所有设置overflow:hidden都能清除浮动。
4 父元素设置浮动
当内部子元素浮动之后,给父级元素也设置浮动来实现清浮动,具体代码如下:
<style>
.main {
float: left;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
<div class="wrap">
<div class="main">
<div>HTML5学堂</div>
<div>H5Course</div>
</div>
<div class="footer"></div>
</div>
代码解释:
优点:语义化没问题,同时代码量少。
缺点:父元素的相邻元素布局受影响——继续设置浮动操作,直到body为止。
使用:浮动元素的父级也设置浮动,只不过会影响其他的布局。
5 after伪元素清浮动
借助伪元素来实现清浮动操作,当前开发中用的最多的存在,具体代码如下:
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clearfix:after {
clear:both;
display:block;
height:0;
content:"200B";
}
.clearfix {
*zoom:1;
}
</style>
<div class="wrap">
<div class="main clearfix">
<div>HTML5学堂</div>
<div>H5Course</div>
</div>
<div class="footer"></div>
</div>
代码解释:
优点:语义化和结构都没问题。
缺点:复用方式不当,会造成代码量增加。
兼容:由于IE6-7不支持after,使用zoom:1 触发hasLayout。
核心代码:
.clearfix:after {
content:"200B";
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom:1;
}
原理解释:
1) display: block; 使伪元素的展示特性以块级元素显示,它默认的展示特性是行元素的展示特性。
2) height: 0; 避免生成内容破坏原有布局的高度。
3) Unicode: 字符里有一个“零宽度空格”,也就是U+200B,这个字符本身是不可见的。
4) zoom: 1; 由于IE6-7不支持:after,使用zoom:1触发hasLayout。
我们今天对于清浮动操作的5种方法就是讲解到这里了,大家可以照着我们给出的代码例子去敲一敲代码,看一下自己敲的效果,即能够明白这些方法的使用了。
五、课堂案例讲解
学完今天讲解完的清浮动的5种方法之后,大家一起来实现一个布局练习吧,小编这里主要就使用父级元素这种方法来操作了,感兴趣的可以把每一种方法都用一用。一起来看看这个案例吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父级浮动</title>
<link rel="stylesheet" href="reset.css">
<style>
/*一级布局*/
.wrap {
width: 540px;
height: 540px;
margin: 0 auto;
}
.div1,.div2 {
width: 540px;
height: 270px;
}
/*二级布局*/
.sdiv1 {
float: left;
width: 135px;
height: 270px;
background: #008000;
}
.sdiv2 {
float: left;
width: 270px;
height: 270px;
}
.sdiv3 {
float: left;
width: 135px;
height: 270px;
background: #808080;
}
.sdiv4 {
float: left;
width: 200px;
height: 270px;
background: #cdfffe;
}
.sdiv5 {
float: left;
width: 340px;
height: 270px;
background: #ffc0cb;
}
.box1 {
height: 135px;
background: #ffffcd;
}
.sbox1 {
float: left;
width: 135px;
height: 135px;
background: #0000ff;
}
.sbox2 {
float: left;
width: 135px;
height: 135px;
background: #ffc0cb;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">
<div class="sdiv1"></div>
<div class="sdiv2">
<div class="box1">
<div class="sbox1"></div>
<div class="sbox2"></div>
</div>
<div class="box1"></div>
</div>
<div class="sdiv3"></div>
</div>
<div class="div2">
<div class="sdiv4"></div>
<div class="sdiv5"></div>
</div>
</div>
</body>
</html>
代码的展示效果:
六、课后作业
根据今天所学的知识点,罗列出清浮动的几种方法。
并用自己的语言,尽可能完整的描述出“浮动与清浮动”(建议整理好语言逻辑,要说什么,先说什么,再说什么~~~)。
- R语言学习 - 图形设置中英字体
- 递归思想解决输出目录下的全部文件
- Linux学习 - 又双叒叕一个软件安装方法
- 在Python中实现你自己的推荐系统
- 在Java中如何实现“Pless presss any key to continue.”
- 震惊小伙伴的Python单行代码
- 如何打造一款可靠的WAF(Web应用防火墙)
- 为啥我的Python这么慢 (一)
- 矩阵的基本知识构造重复矩阵的方法——repmat(xxx,xxx,xxx)构造器的构造方法单位数组的构造方法指定公差的等差数列指定项数的等差数列指定项数的lg等差数列sub2ind()从矩阵索引==》
- 简单的Writer和ReaderWriter的主要方法Writer工作原理Reader的主要方法readLine():String
- 为啥我的Python这么慢 - 项查找 (二)
- 初识字节流+实现缓冲字节流OutputStream的主要方法构造方法读关流实现BufferedInputStream实现BufferedOutputStream为什么read()返回的是Int型而不是
- Properties+重温Map+本地计数器Map方法Properties的方法用Properties的好处
- SequenceInputStreamSequenceInputStream构造方法读关流刷新
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- React Native学习之Android的返回键BackAndroid详解
- Android动态添加view的方法示例
- Android开发之瀑布流控件的实现与使用方法示例
- Android自定义View绘制四位数随机码
- Anroid四大组件service之本地服务的示例代码
- Android使用Activity实现简单的可输入对话框
- ANDROID BottomNavigationBar底部导航栏的实现示例
- Android实现时间倒计时功能
- Android开发基于Drawable实现圆角矩形的方法
- Android开发中滑动分页功能实例详解
- Android登录注册功能 数据库SQLite验证
- CMQ消费者报错,无法获取本机ip地址问题排查
- 腾讯云TKE-Metrics-Server案例: TKE中自建Metrics-Server问题
- (建议收藏)关于JS事件循环, 这一篇就够啦
- TensorFlow2 开发指南 | 02 回归问题之汽车燃油效率预测