一、css清除浮动方法学习笔记总结(超详细,简单易懂)
**
css清除浮动方法学习笔记总结(超详细,简单易懂)
**
问题:
上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是container下面的元素)位置发生错乱,出现在了container父元素的设置了浮动的子元素背面。
原因:
父级元素的高度为0,设置了浮动的子元素,不会像未设置浮动的子元素那样会自动撑开父元素
1.为什么需要浮动?
布局的需要:让多个盒子(div)水平排列成一行;实现盒子的左右对齐
虽然我们行内块元素(inline-block)可以帮助我们实现多个元素一行显示,但是他却有自己的缺陷:
1). 它可以实现多个元素一行显示,但是中间会有空白缝隙
2). 它不能实现盒子左右对齐
2.什么是浮动(float)?
漂浮在普通流的上面。 脱离标准流。 俗称 “脱标”
1)概念:元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制
- 移动到指定位置。
2)作用:
- 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐
- 浮动最早是用来控制图片,实现文字环绕图片的效果。
3)语法:
在 CSS 中,通过 float
中文,属性定义浮动,语法如下:
选择器 { float: 属性值; }
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
一、父级元素设置了高度的情况下:
在给父级元素设置了高度,子元素设置了float浮动的情况下,不需要清除浮动。因为,父级元素有高度,所有浮动的子元素只是在父级元素内部进行了浮动,这并不会对父级后面的其他元素在文档流中的位置产生影响。
二、父级元素没有设置高度的情况下:
有些实际情况中,可能不能够给父级元素设置高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。但我们实际想要达到一种子元素有多高,父级元素就自动有多高,也就是父元素被子元素所撑开的效果。
在这种不设置高度的情况下,就必须清除浮动!
下面介绍四种不设置父级高度情况下的清除浮动的方法:
1)在CSS中,clear属性用于清除浮动
- 语法:
选择器{clear:属性值;} clear 清除浮动
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中, 几乎只用 clear: both;
1).额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签
例如
<div style=”clear:both”></div>
,或则其他标签br等亦可。
注意:这个浮动元素末尾新增的必须是块元素,不能是行内元素,否则清除浮动失效!
- 优点: 通俗易懂,书写方便
- 缺点: 添加许多无意义的标签,结构化较差。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>清除浮动的方法总结</title><style type="text/css">.container {width: 400px;/* 父元素container不设置高度的情况下,子元素设置float浮动,会出现父元素container的高度为0的情况 */background-color: #00BFFF;margin: 0 auto;}.box1 {float: left;width: 100px;height: 100px;background-color: #98FB98;}.box2 {float: left;width: 200px;height: 200px;background-color: bisque;}.footer {height: 300px;background-color: lightcoral;text-align: end;}.clear {clear: both; /* 清除浮动 */}</style></head><body><div class="container"><div class="box1">浮动的box1</div><div class="box2">浮动的box2</div><div class="clear"></div></div><div class="footer">container下面的footer</div></body>
</html>
2).父级添加overflow属性方法
可以给父级添加:
overflow为 hidden| auto| scroll
都可以实现。
- 优点: 代码简洁
- 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>清除浮动的方法总结</title><style type="text/css">.container {width: 400px;/* 父元素container不设置高度的情况下,子元素设置float浮动,会出现父元素container的高度为0的情况 */background-color: #00BFFF;margin: 0 auto;overflow: hidden;/* 给设置了浮动的子元素的父元素添加overflow:hidden 来清除浮动 */}.box1 {float: left;width: 100px;height: 100px;background-color: #98FB98;}.box2 {float: left;width: 200px;height: 200px;background-color: bisque;}.footer {height: 300px;background-color: lightcoral;text-align: end;}/* .clear {clear: both;} */</style></head><body><div class="container"><div class="box1">浮动的box1</div><div class="box2">浮动的box2</div><!-- <div class="clear"></div> --></div><div class="footer">container下面的footer</div></body>
</html>
3).使用after伪元素清除浮动
注意:这也是设置在父元素上面
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了
使用方法:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1; } /* IE6、7 专有 */
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>清除浮动的方法总结</title><style type="text/css">.container {width: 400px;/* 父元素container不设置高度的情况下,子元素设置float浮动,会出现父元素container的高度为0的情况 */background-color: #00BFFF;margin: 0 auto;/* overflow: hidden; *//* 给设置了浮动的子元素的父元素添加overflow:hidden 来清除浮动*/}.box1 {float: left;width: 100px;height: 100px;background-color: #98FB98;}.box2 {float: left;width: 200px;height: 200px;background-color: bisque;}.footer {height: 300px;background-color: lightcoral;text-align: end;}.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom: 1;}/* IE6、7 专有 *//* .clear {clear: both;} */</style></head><body><div class="container clearfix"><div class="box1">浮动的box1</div><div class="box2">浮动的box2</div><!-- <div class="clear"></div> --></div><div class="footer">container下面的footer</div></body>
</html>
- 优点: 符合闭合浮动思想 结构语义化正确
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 代表网站: 百度、淘宝网、网易等
4).使用双伪元素清除浮动
注意:这也是设置在父元素上面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>清除浮动的方法总结</title><style type="text/css">.container {width: 400px;/* 父元素container不设置高度的情况下,子元素设置float浮动,会出现父元素container的高度为0的情况 */background-color: #00BFFF;margin: 0 auto;/* overflow: hidden; *//* 给设置了浮动的子元素的父元素添加overflow:hidden 来清除浮动*/}.box1 {float: left;width: 100px;height: 100px;background-color: #98FB98;}.box2 {float: left;width: 200px;height: 200px;background-color: bisque;}.footer {height: 300px;background-color: lightcoral;text-align: end;}/* .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;} */.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}/* IE6、7 专有 *//* .clear {clear: both;} */</style></head><body><div class="container clearfix"><div class="box1">浮动的box1</div><div class="box2">浮动的box2</div><!-- <div class="clear"></div> --></div><div class="footer">container下面的footer</div></body>
</html>
使用方法:
.clearfix:before,.clearfix:after { content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}
- 优点: 代码更简洁
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 代表网站: 小米、腾讯等
清除浮动总结
一、什么时候用清除浮动呢?
- 父级没高度
- 子盒子浮动了
- 影响下面布局了,我们就应该清除浮动了。
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差。 |
父级overflow:hidden; | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
二、清除浮动的本质:
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。准确地说,并不是清除浮动,而是清除浮动后造成的影响。
三、清除浮动的策略:
闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
一、css清除浮动方法学习笔记总结(超详细,简单易懂)相关推荐
- Linux 学习笔记之超详细基础linux命令 Part 3
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 2----------------- ...
- Spring框架学习笔记,超详细!!(4)
Java小白开始学习Spring框架,一方面,跟着视频学习,并记录下学习笔记,方便以后复习回顾.另一方面,发布学习笔记来约束自己,学习路程还很遥远,继续加油坚持!!!希望能帮助到大家! 另外还有我的牛 ...
- css清除浮动方法总结
一.伪元素清除浮动 1 .clearfix:after{ 2 content: ""; 3 display: table; 4 clear: both; 5 } 为什么选择disp ...
- css清除浮动无效,CSS清除浮动方法总结
清除浮动的原因 假设一个 div 内部有个浮动的 div,当内部 div 的高度要比外层的父级 div 高度大时,将会导致父级 div 高度无法随着内部 div 的高度自适应,这是由于浮动元素已经脱离 ...
- stm32正常运行流程图_STM32单片机学习笔记(超详细整理143个问题,学习必看)...
原标题:STM32单片机学习笔记(超详细整理143个问题,学习必看) 1.AHB系统总线分为APB1(36MHz)和APB2(72MHz),其中2>1,意思是APB2接高速设备 2.Stm32f ...
- C++学习笔记(超详细笔记记录ing)
C++学习笔记(11) 学习是一件任重而道远的事情,与其焦虑不如动手起来,借助平台记录自己学习笔记,希望和大家多多交流,今天又是努力成为程序媛的一天! 17.类和对象 17.3 C++对象模型和thi ...
- 二、前端pink老师的CSS定位学习笔记(超详细,简单易懂)
定位(position) 1. CSS 布局的三种机制 网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
- vue学习笔记(超详细)
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数 ...
- 第四章网络安全学习笔记(超详细)
---------------------------网络安全---------------------------- 万字长文,小编自己手打,如有勘误,敬请谅解! 网安笔记 ------------ ...
最新文章
- 什么是NullReferenceException,如何解决?
- 下列哪个不是python合法的变量名_下列哪个不是Python中合法的数据类型?
- linux新手程序,linux新手需要掌握的入门级命令
- 整理的常用JAVA开源库简介
- 创建一个plugin - drupal 8
- UDP内网和外网连接通信的问题
- 前端调用mysql异步_python链家网高并发异步爬虫asyncio+aiohttp+aiomysql异步存入数据...
- SDUT 2218 Give Me an E(规律)
- linux下QOS--理论篇
- 复制linux虚拟机后ifconfig没有出现网卡处理方法
- 借博客发泄一下对ExtJs的不满
- VB程序设计算机,VB编程:编写一个过程,用来计算并输出 S=1+1/2+1/3+……+1/100 的值。...
- 有C++特色的极乐净土
- J2Cache缓存的使用
- 计算机登录密码保存,怎么查看电脑浏览器中保存的密码
- Android 9.0 10.0 Launcher3 时钟动态图标的定制化(时钟动态图标)
- DRM DUMB相关说明
- 如何处理授权和监督?
- 鱼眼图像校正(球面等距投影模型)
- 在几何画板中如何制作圆柱的侧面展开动画_几何画板如何制作圆柱体形成的过程动画...