css clear属性 的深入了解
css clear属性深入了解：
一、什么是 CSS clear清除浮动？
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
clear属性值：
left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素
right 清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素
both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素
none，就是不做任何处理，不清除任意一边的浮动元素
inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 |
left right both none inherit |
1 |
二、clear应用场景
①Float 往往是用于图像，就像是办公软件word中的文字坏绕图片的方式设置，
那么clear就是让元素不要坏绕图片，而是自成一行
②float 布局时一样非常有用（让元素脱离正常的文档流）。
那么clear就是让脱离的元素回归到正常的文档流中。
清除图片浮动应用实例：
实例：图片浮动在左边，后面的元素清除左边的浮动，就是不要让p的左边存在 带有 浮动属性 的 元素。
那么p元素就会自己再去成一行了。
p {clear: left;}<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {float: left;}p {clear: left;}</style>
</head><body><div style="width: 300px;border: 1px solid black;"><img src="http://www.runoob.com/images/klematis_small.jpg" alt="tu1" /><p>这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵</p></div>
</body></html>结果展示：
没有清除浮动 设置清除浮动
布局中清除浮动实例：
float通过浮动设置，让文档脱离正常的标准流。设置了浮动的元素可以紧跟上上一个设置了浮动的元素后面，不再自成一行。
clear让这些浮动的元素 后面的元素回归正常的文档流，拥有自己的空间
实例：
设计一个空div，让其两边清除浮动，那么后面的元素就不会被覆盖，拥有自己的空间。
.clearfloat{clear: both;}<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>body,p {padding: 0;margin: 0;}nav {width: 100%;height: 30px;background-color: gray;}.menu {float: left;width: 20%;height: 300px;background-color: blueviolet;}.banner {float: left;width: 60%;height: 300px;background-color: rosybrown;}.selector {float: left;width: 20%;height: 300px;background-color: yellowgreen;}.clearfloat {clear: both;}.normal {width: 50%;height: 320px;border: 1px dashed green;background: red;}
</style><body><nav>导航导航区域</nav><div class="menu">菜单菜单区域</div><div class="banner">轮播轮播区域</div><div class="selector">查询查询区域</div><div class="clearfloat"></div><div class="normal">这里是正常的文档，没有设置浮动，没有浮动，没有浮动！</div>
</body></html>结果展示：
清除浮动之后，normal div就有自己的正常空间了。
三、clear 属性各个属性值。
left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素
right 清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素
both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素
none，就是不做任何处理，不清除任意一边的浮动元素
inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。
如下代码，1,2,3,4 div元素设置了做浮动，5,6,7 div元素设置了右浮动。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box2,.box3,.box4 {float: left;}.box5,.box6,.box7 {float: right;}.clear1 {clear: left;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2" style="background-color:rgb(115, 255, 0);">222</div><div class="box3" style="background-color:rgb(187, 255, 0);">3333</div><div class="box4" style="background-color:rgb(255, 0, 191);">444</div><div class="box5" style="background-color:rgb(4, 0, 255);">555</div><div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div><div class="box7" style="background-color:rgb(255, 0, 191);">777</div></body></html>结果展示：
下面是给box3，333这个div设置清除左边浮动，(那么它的左边就不会存在有浮动的元素)，
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box2,.box3,.box4 {float: left;}.box5,.box6,.box7 {float: right;}.clearfloatleft {clear: left;}.clearfloatright {clear: right;}.clearfloatboth {clear: both;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2" style="background-color:rgb(115, 255, 0);">222</div><div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div><div class="box4" style="background-color:rgb(255, 0, 191);">444</div><div class="box5" style="background-color:rgb(4, 0, 255);">555</div><div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div><div class="box7" style="background-color:rgb(255, 0, 191);">777</div></body></html>结果展示：
给3设置清除左边浮动，因为1与2都是浮动的，为了达到3清除浮动的效果，3就自成一行了，紧接着3后面的元素，4,5,6,7还是按照自己的属性该干嘛干嘛，如何浮动就如何紧接着3的后面浮动。
下面是给box7，777这个div设置清除右边浮动，(那么它的右边就不会存在有浮动的元素)，
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box2,.box3,.box4 {float: left;}.box5,.box6,.box7 {float: right;}.clearfloatleft {clear: left;}.clearfloatright {clear: right;}.clearfloatboth {clear: both;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2" style="background-color:rgb(115, 255, 0);">222</div><div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div><div class="box4" style="background-color:rgb(255, 0, 191);">444</div><div class="box5" style="background-color:rgb(4, 0, 255);">555</div><div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div><div class="box7 clearfloatright" style="background-color:rgb(255, 0, 191);">777</div></body></html>结果展示：
设置了box7 ，清除右边浮动，它右边的666,555都是浮动的，为了达到box7 右边没有浮动，box7就只好自己自成一行了。
下面是给box4，444这个div设置清除两边浮动，(那么它的两边都不会存在有浮动的元素)，
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box2,.box3,.box4 {float: left;}.box5,.box6,.box7 {float: right;}.clearfloatleft {clear: left;}.clearfloatright {clear: right;}.clearfloatboth {clear: both;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2" style="background-color:rgb(115, 255, 0);">222</div><div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div><div class="box4 clearfloatboth" style="background-color:rgb(255, 0, 191);">444</div><div class="box5" style="background-color:rgb(4, 0, 255);">555</div><div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div><div class="box7 clearfloatright" style="background-color:rgb(255, 0, 191);">777</div></body></html>结果展示：
好像box4右边的浮动没有被清除啊？这个怎么就不正确了呢？没有按照理解中的来了呢？
难道是因为555,666是离开太远了，影响不到？下面来一个box4-5是进跟在box4后面的，
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box4-5,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box2,.box3,.box4,.box4-5 {float: left;}.box5,.box6,.box7 {float: right;}.clearfloatleft {clear: left;}.clearfloatright {clear: right;}.clearfloatboth {clear: both;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2" style="background-color:rgb(115, 255, 0);">222</div><div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div><div class="box4 clearfloatboth" style="background-color:rgb(255, 0, 191);">444</div><div class="box4-5 clearfloatboth" style="background-color:gold;">444-555</div><div class="box5" style="background-color:rgb(4, 0, 255);">555</div><div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div><div class="box7 clearfloatright" style="background-color:rgb(255, 0, 191);">777</div></body></html>结果展示：
还是不行啊？！ box4右边还是存在浮动的元素，那么到底是因为什么呢？
四、出现清除没有效果的原因？？？
原因： 代码是顺序执行的，设置清除的没法影响后面加载的元素的，它只能影响前面的元素！
屁列，说法一样不对，下面的一个例子中box3出现可以清除是可以理解的，box4的加载在最后面怎么也可以清除了？
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
如下，box1 与box3设置为做浮动，box设置为右浮动，下载来给box3设置清除两边浮动，
它们的加载顺序是box1，然后是box2，最终是box3，
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box3 {float: left;}.box2 {float: right;}.clearboth {clear: both;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2 " style="background-color:rgb(115, 255, 0);">222</div><div class="box3 clearboth" style="background-color:rgb(187, 255, 0);">3333</div>
</body></html>结果展示：
给box3设置，3个属性值的效果都是一致的。
box3设置 clear：both box3 设置clear：left
box3设置 clear：right
下面同样的box4设置清除效果。
下载顺序box1，box2，box3，box4，
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1,.box2,.box3,.box4,.box5,.box6,.box7 {width: 100px;height: 100px;}.box1,.box3 {float: left;}.box2,.box4 {float: right;}.clearboth {clear: both;}.clearleft {clear: left;}.clearright {clear: right;}</style>
</head><body><div class="box1" style="background-color:red;">111</div><div class="box2 " style="background-color:rgb(115, 255, 0);">222</div><div class="box3 " style="background-color:rgb(187, 255, 0);">3333</div><div class="box4 clearboth " style="background-color:gray;">44444</div></body></html>box4设置 clear：both box4设置 clear：left
box4设置 clear：right
box4是在box2后面
css clear属性 的深入了解相关推荐
- css clear属性_CSS中的clear属性
css clear属性 CSS | 清除财产 (CSS | clear Property) We know so much about float property and how it is use ...
- [css] clear属性只对块级元素有效么？为何无法应用于行内元素？
[css] clear属性只对块级元素有效么?为何无法应用于行内元素? block元素浮动之后已经脱离了文档流了,排列的顺序都不一样了,所以清除了之后有效果. inline-block还是在文档流里面 ...
- CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- html clear属性值,clear属性有哪些属性值 CSS clear属性的理解.
CSS clear是什么属性... 语法: clear : none | left |right | both 参数: none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left ...
- 多列网页布局CSS float 属性和 CSS Clear 属性
CSS float 属性 CSS float 属性用于设计多列网页布局.如果你想设计两列或三列的网页布局,你必须在float 属性的帮助下浮动你的 div 元素. div 标签是块级元素,因此,div ...
- 在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
- html clear属性值,clear属性怎么用
clear属性设置元素左侧或右侧的元素不浮动,可用于实现浮动的清除,解决浮动布局带来的一些问题. CSS clear属性 作用:clear属性可以设置浮动元素左右两侧的元素不浮动. 语法:clear: ...
- CSS中clear属性的both、left和right浅析
前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...
- CSS 清理浮动 clear属性
虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用.浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置. 首先,看看父元素的高度塌陷.假设有一个容器,其中两个子元素,一个子元 ...
- html clear属性值,CSS clear both清除浮动
DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...
最新文章
- python sin_Python sin() 函数
- 简事二三 之 http缓存机制
- JAVA中返回值为字母时_LeetCode#524通过删除字母匹配到字典里最长单词-java中CompareTo方法用法以及Comparator中Compare方法返回值...
- android8.0和9.0平板电脑区别,安卓9.0和8.0有什么区别？ 哪个更好
- 马超计算机博士,湖南大学设计院马超民等博士生团队发明“手势”控制汽车
- Python入门到精通三天速成第三讲——多重继承
- IE6 的 hover 伪类 bug
- java 汉字排序_Java中文排序
- 2019常用的几种编程语言的简单介绍和特点以及应用领域
- python爬虫练习2:取道指成分股数据
- matlab选址问题——分级选址定容
- VScode使用markdown
- 利用nginx搭建http和rtmp协议的流媒体服务器,用nginx搭建http/rtmp/hls协议的MP4/FLV流媒体服务器...
- 补丁冷启动模式_Bilibili 移动端组件化实践中的冷启动优化
- DDR SDRAM内存发展历程
- Python 基础 (-)
- 基于大佬的代码实现看板娘效果（三段代码实现）
- [从头读历史] 第289节 神之物语 忒修斯的故事
- ArcGIS如何创建渔网？渔网不见了。
- 微信公众平台开发 模版消息