【web前端开发】CSS浮动
文章目录
- 1.浮动
- 2.伪元素
- 3.标准流
- 4.行内块元素的问题
- 5.浮动的作用
- 6.浮动的特点
- 7.清除浮动
- 方法1:额外标签
- 方法2:单伪元素
- 方法3:双伪元素
- 方法4:overflow
1.浮动
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
元素的水平方向浮动,意味着元素只能靠左或者靠右。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
如果图像是左浮动,下面的文本流将环绕在它右边:
2.伪元素
伪元素:通过CSS模拟出标签的效果
伪元素 | 作用 |
---|---|
::before | 在父元素内容前加一个伪元素 |
::after | 在父元素内容最后加一个伪元素 |
必须要有content属性
- 伪元素默认是行内元素
3.标准流
块级元素独占一行->垂直布局
行内元素/行内块元素 一行可以显示多个 水平布局
4.行内块元素的问题
接下来讲一下行内块元素的会出现的问题:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 60px;display: inline-block;}.one{background-color: skyblue;}.two{background-color: grey;}</style>
</head>
<body><div class="one">1</div><div class="two">2</div>
</body>
</html>
这个是div换行写的效果
这个是不换行写的效果
如果想要换行写且要两个盒子之间没有空格,就需要用到浮动
5.浮动的作用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 60px;display: inline-block;}.one{background-color: skyblue;/*设置浮动*/float: left;}.two{background-color: grey;/*设置浮动*/float: left;}</style>
</head>
<body><div class="one">1</div><div class="two">2</div>
</body>
</html>
显示效果:
6.浮动的特点
1.浮动会脱离标准流(俗称"脱标"),在标准流中不占位置
示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 100px;height: 100px;background-color: skyblue;}.two{width: 200px;height: 200px;background-color: grey;}.three{width: 300px;height: 300px;background-color: greenyellow;}</style>
</head>
<body>
<div class="one">111</div>
<div class="two">222</div>
<div class="three">333</div>
</body>
</html>
这是不加浮动的显示效果,下面看看加了浮动的
在上面代码的基础上,给one这个类选择器加一个浮动
.one{width: 100px;height: 100px;background-color: skyblue;/*增加浮动*/float: left;}
效果:
可以看到第二个跑到了第一个div的位置,就这就是浮动的脱标现象,相当于是飞起来了.
但是蓝色的div盒子并没有把灰色div盒子的内容遮盖掉,虽然是脱标,但算是一种半脱标.
浮动的元素比标准流多半个级别,可以覆盖标准流中的元素
这也是浮动的第二个特点
此时如果再给第二个div增加浮动,会是什么效果呢
示例:
.two{width: 200px;height: 200px;background-color: grey;/*增加浮动*/float: left;}
效果
第二个div是紧靠着第一个div对齐的,浮动找浮动下一个浮动元素会在上一个元素的左右浮动 ->浮动的第三个特点
浮动的元素都是靠着最上面对齐的,这也叫顶对齐
如果不想顶对齐,也可以给盒子增加外边距实现不对齐
浮动的显示效果:
- 一行可以显示多个
- 可以设置宽高
浮动后的元素具有行内块元素的特点,但是浮动的元素之间换行写不会有缝隙
7.清除浮动
这里的清除浮动并不是把浮动的代码给清除了,而是其它元素会受到浮动的影响,我们不想让其它元素受到浮动的影响,因此我们需要清除浮动
示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 500px;height: 300px;background-color: pink;margin: 0 auto;}.two{width: 100%;height: 100px;background-color: greenyellow;}.three{/*浮动*/float: left;width: 300px;height: 300px;background-color: skyblue;margin: 0 auto;} </style>
</head>
<body>
<div class="one"><div class="three"></div>
</div>
<div class="two"></div>
</body>
</html>
效果:
如果我想要的是绿色的盒子就在蓝色的盒子下面这个位置显示
那么如果将粉色div的高度去除掉,那么就出现以下效果:
此时按下F12检查,我们发现第一个div的长和宽为500 * 0
蓝色的div已经脱标了.因此绿色的div就跑到上面去了.这就是受到了浮动的影响
父子级关系,父元素没有高度,子元素浮动,后面的标准流盒子就会受到影响
最简单的办法就是给父元素设置高度,但是通常情况下,不会这么写
下面给大家介绍其它清除浮动的方法
方法1:额外标签
方法有两步:
1.给父元素内容的最后加一个块级元素 2.给增加的这一个块级元素增加设置: clear:both
示例:
在刚才的代码上进行修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 500px;/*height: 300px;*/background-color: pink;margin: 0 auto;}.two{width: 100%;height: 100px;background-color: greenyellow;}.three{float: left;width: 300px;height: 300px;background-color: skyblue;}/*清除浮动*/.clearfix{clear: both;}</style>
</head>
<body>
<div class="one"><div class="three"></div><!-- 增加一个块级元素 --><div class="clearfix"></div>
</div>
<div class="two"></div>
</body>
</html>
效果:
这个方法不止清除了浮动,也让粉色重新显示出来了
这种方法是增加的行内元素,把原来的盒子撑开了
缺点: 增加了额外的元素,会使HTML结构变得复杂
方法2:单伪元素
这个方法是使伪元素代替了额外的标签
基本写法:
.clearfix::after{content: '';display: block;clear: both;}
补充写法(为了兼容性):
.clearfix::after{content: '';display: block;clear: both;/*在网页中看不到伪元素*/height: 0;visibility: hidden;}
直接让父元素调用这个伪类选择器即可
原理是和额外标签法是一样的
方法3:双伪元素
与单伪元素写法类似
写法:
.clearfix::after,.clearfix::before{content: '';display: table;}/*真正清除浮动的标签*/.clearfix::after{clear: both;}
这里的 .clearfix::before 是为了解决外边距塌陷问题
然后让父类引用伪类选择器即可
单伪元素和双伪元素这两种清除浮动的写法,不需要背,直接拿来用即可
方法4:overflow
清除浮动还有一种特别简单的写法: 直接给父元素设置 overflow:hidden
这里就不跟大家演示了,很简单.可以自行去尝试一下
感谢你的观看!希望这篇文章能帮到你!
专栏:《web前端开发》 在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
【web前端开发】CSS浮动相关推荐
- Web前端开发——CSS样式(Ⅰ)文本与文字样式
目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2 行高line-height 3.2.1 基本概念 3.2.2 行高的应用--居中垂直对齐效果 3.3 对 ...
- Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- 快来学习一下吧!Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望 ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...
- Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
- 【web前端开发 | CSS】页面布局之盒子模型
思维导图 文章目录 思维导图 1:边框 2:内边距 3:外边距 外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷 所谓 盒子模型:就是把 HTML 页面中的布局元素看作是 ...
- 【web前端开发 | CSS】页面布局之定位
思维导图 (案例放在文章结尾) 文章目录 思维导图 一:定位 1.1:静态定位(position:static:) 1.2:相对定位(position:relative:) 1.3:绝对定位(posi ...
- Web前端开发——CSS样式(Ⅱ)背景、超链接样式
目录 1. CSS背景 1.1 基本属性 1.2 文件组织形式 1.3 测试代码 1.4 效果图 2. CSS超链接 2.1 链接的四种状态 2.2 测试代码 2.3 效果图 1. CSS背景 1.1 ...
- 【web前端开发 | CSS】css元素的显示模式
思维导图 一:元素显示模式分类 *网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. *元素显示模式就是元素(标签)以什么方式进行显示,比如<div> ...
- 简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
最新文章
- HyperLedger Fabric 错误记录
- 包区别 版本_详解Linux下二进制包、源代码包、rpm包区别与联系
- bose蓝牙音箱使用说明_身轻如燕好带走 时尚便携蓝牙音箱TOP5推荐
- java回合制武侠手游_App Store 上的“群侠传-怀旧开放武侠RPG回合制手游”
- macos+未能和恢复服务器,macOS Big Sur 完美降级教程
- 第10组17通信三班228网络协议抓包分析
- weekend110(Hadoop)的 第七天笔记
- pytorch搭建LSTM神经网络预测电力负荷
- ADS(Advanced Design system)仿真测试元器件在不同功率下的输入阻抗
- c语言逻辑运算符意义,c语言逻辑运算符怎么理解?
- sublime使用指南
- 2021-2026年中国畜牧业发展环境分析及投资前景预测报告
- Day 03-常用 Composition API_拉开序幕的setup()
- 什么是数据分析报告,主要有什么价值?
- docker:IPv4 forwarding is disabled. Networking will not work. 解决方法
- @PersistenceContext和@Autowired在EntityManager上应用的区别。
- teb planner error
- 大数据-日志接收处理
- python全栈是什么
- Centos添加管理员账户,创建账户,adduser