博学谷学习记录】超强总结，用心分享|清除浮动

今天分享一些关于清除浮动的方法，也会介绍一些浮动的特点及注意点，希望大家喜欢，

1. 浮动的作用

早期的作用：图文环绕；现在的作用：网页布局；

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右。

2. 浮动的代码

属性名：float 左浮动：float : left 右浮动：float : right

3. 浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置；

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素；

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；

4. 浮动元素有特殊的显示效果；

• 一行可以显示多个

• 可以设置宽高

注意点：浮动的元素不能通过text-align:center或者margin:0 auto。

4. 浮动的案例

a标签默认是行内元素，默认不能设置宽高？？

• 方法一：给a标签设置 display : inline-block；

• 方法二：给a标签设置 display : block；

• 方法三：给a设置 float : left；

清除浮动

清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开父元素；

清除浮动的目的是什么

需要父元素有高度，从而不影响其他网页元素的布局；

清除浮动的方法

① 直接设置父元素高度

• 优点：简单粗暴，方便

• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

② 额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

③ 单伪元素清除法

用伪元素替代了额外标签

① ：基本写法

② ：补充写法

• 优点：项目中使用，直接给标签加类即可清除浮动

④ 双伪元素清除法

• 优点：项目中使用，直接给标签加类即可清除浮动

⑤ 给父元素设置overflow : hidden

直接给父元素设置 overflow : hidden

• 优点：方便

以上就是关于浮动及清除的内容了，我们应该做到即时复习，巩固学过的知识，记忆得更牢固。学习方法因人而异，各不相同，愿同学们找到适合自己的学习方法，在学习生涯中绘上精彩的一笔!

博学谷学习记录】超强总结，用心分享|清除浮动相关推荐

[博学谷学习记录]超强总结,用心分享|第07节常用的API-----笔记篇
目录 1.API 1.1 API概述-帮助文档的使用 1.2 键盘录入字符串 2. String类 2.1 String概述 2.2 String类的构造方法 2.4 创建字符串对象的区别对比 2.5 ...
{博学谷学习记录} 超强总结,用心分享|狂野架构师-前置互联网架构演变过程
本章以系统架构,数据架构,两种维度来进行讲解目录 1 系统架构 1,1 单体架构 1.2 中台战略 2 数据库架构 2,1 单体架构 2.2 主从读写 2.3 分库分表 3 总结 1 系统架构 1, ...
[博学谷学习记录]超强总结,用心分享|架构 Nacos入门
提示:学习笔记欢迎指点文章目录前言一.Nacos安装二.Nacos服务注册与发现 1.服务提供者Provider 2.服务消费者Consumer 三.Nacos作为配置中心前言 Nacos ...
[博学谷学习记录]超强总结,用心分享|架构敏捷 - 开发管理之道
提示:学习笔记欢迎指点文章目录 1.敏捷开发思想之道 2.面向对象开发之道 3.敏捷学习之道 1.敏捷开发思想之道一名敏捷开发者,敏捷思想的掌握自然首当其冲.在敏捷开发实施的过程中,我们虽然不是 ...
[博学谷学习记录]超强总结,用心分享|第16节集合续-----笔记篇
目录 1.HashSet集合 1.1HashSet集合概述和特点[应用] 1.2HashSet集合的基本应用[应用] 1.3哈希值[理解] 1.4哈希表结构[理解] 1.5HashSet集合存储学生对 ...
[博学谷学习记录] 超强总结，用心分享|陌陌综合案例
注:大家觉得博客好的话,别忘了点赞收藏呀,本人每周都会更新关于人工智能和大数据相关的内容,内容多为原创,Python Java Scala SQL 代码,CV NLP 推荐系统等,Spark Flin ...
[博学谷学习记录]超强总结，用心分享|Hive的压缩格式
压缩格式工具算法文件扩展名是否可切分 DEFAULT 无 DEFAULT .deflate 否 Gzip gzip DEFAULT .gz 否 bzip2 bzip2 bzip2 .bz2 是 ...
[博学谷学习记录]超强总结，用心分享|软件测试之计算机基础（一）
本周开始学习软件测试,而我也即将开始在平台记录我的学习之路.我会把我的个人心得及掌握的知识发布在此平台,俗话说最好的输入就是输出,希望在输出的同时能有更多的收获,也希望与大家多多交流. 为了更好的学习 ...
[博学谷学习记录]超强总结，用心分享|人工智能机械学习基础知识线性回归总结分享
1.线性回归的核心是参数学习,线性回归和回归方程(函数)有关 2.线性回归是目标值预期是输入变量的线性组合 3.欠拟合的产生原因是学习到数据的特征过少 4.多元线性回归中的"线性" ...
[博学谷学习记录] 超强总结，用心分享|JavaEE就业课-尊享无忧+Java基础语法|面向对象(1wk)
学习笔记目录目录学习笔记目录前言一.变量 1. 关键字:被java赋予特殊含义的字符 2. 常量:不会发生改变的量(数据)编辑 3. 变量:内存中的存储空间. 4. 类型转换 5. 算术运算 ...

博学谷学习记录】超强总结，用心分享|清除浮动

博学谷学习记录】超强总结，用心分享|清除浮动相关推荐

最新文章

热门文章