clear清楚浮动元素对当前元素所产生的影响

最新推荐文章于 2022-06-30 13:57:46 发布
最新推荐文章于 2022-06-30 13:57:46 发布
阅读量174 收藏
点赞数
分类专栏： 前端 css3 css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/softlipaaa/article/details/118439185
版权
前端 同时被 3 个专栏收录
65 篇文章 2 订阅
订阅专栏
css3
47 篇文章 0 订阅
订阅专栏
css
42 篇文章 0 订阅
订阅专栏

clear

clear

介绍

若我们不希望某个元素因为其他元素浮动的影响而改变位置

可以通过clear属性来清楚浮动元素对当前元素所产生的影响

clear作用

清楚浮动元素对当前元素所产生的影响

可选值

			left	清除左侧浮动元素对当前元素的影响
			
			right	清除右侧浮动元素对当前元素的影响
			
			both	清除`两侧中最大影响的`那侧

原理

设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素影响

大毛驴啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS教程:浮动元素对浏览器的支持
09-27
2. **使用伪元素**：利用CSS的伪元素如`:after`，可以在浮动元素的父元素内创建一个看不见的内容，并设置`clear:both`或`content:""; display:block; overflow:hidden;`。这种方法保持了HTML结构的简洁，但需要对CSS...
css如何让浮动元素水平居中
09-03
浮动元素在CSS布局中经常被用来创建多列布局或实现其他复杂的布局效果。然而，当需要将浮动元素水平居中时，常规的`margin: 0 auto`方法并不适用，因为这种居中方式依赖于元素的宽度，并且不适用于浮动元素。在本文...
【前端-CSS】消除浮动元素对当前元素的影响
慢慢来吧，都会有的。
03-12 721
clear方式消除 当我们希望某个元素不会因为浮动元素而改变自己当前的位置时，可以通过clear来消除 原理：设置消除浮动后，浏览器会自动为元素添加一个上外边距，使其位置不受其他元素影响
CSS——清除浮动元素对当前元素所产生的影响
Bonsoir777的博客
06-30 1040
清除浮动元素对当前元素所产生影响的方法
h5-----------清除浮动
学习是我快乐， 吗
07-06 390
不设置浮动的效果图：box1设置了浮动后：clear: left之后可还原到 不设置浮动的效果图box1 box2都设置了浮动的效果图box3清除所有浮动：clear: both效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
清除HTML元素浮动带来的影响
Elltor
08-26 3100
一般使用浮动后都要清除，否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果，而是消除元素浮动对其他元素的影响。清除浮动的方法有很多，方式也各有不同。 清除浮动大致有两种方式：一通过添加一个元素设置属性清除；二通过设置父级元素的属性清除。
[css] clear属性只对块级元素有效么？为何无法应用于行内元素？
歌谣的博客
01-23 677
[css] clear属性只对块级元素有效么？为何无法应用于行内元素？ block元素浮动之后已经脱离了文档流了，排列的顺序都不一样了，所以清除了之后有效果。 inline-block还是在文档流里面，加浮动不加浮动都没有什么作用的，所以清除也没有影响 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
在DIV容器中使用浮动元素的方法
09-25
但请注意，这可能会对整个页面布局产生连锁反应，因为这个浮动的`div`也将脱离文档流。如果选择此方法，可能需要额外调整其他元素的位置，以确保整体布局的正确性。 ```css .container { float: left; /* 或 '...
CSS教程:弄懂闭合浮动元素
09-27
根据CSS规范，浮动元素会被移出正常的文档流，不会影响周围块状元素的宽度，但会影响内联元素的排列。然而，一个问题是，当浮动元素的高度超出其父容器时，父容器通常不会自动扩展以包裹住这些浮动元素，导致所谓的...
CSS教程：彻底弄懂闭合浮动元素
09-27
然而，浮动元素会带来一个问题，即父元素无法正确包裹住这些浮动的子元素，导致父元素的边框无法正常显示，可能会穿透到子元素内部，影响页面的视觉效果。这个问题被称为“浮动元素的封闭”或者“清除浮动”。 首先...
清除浮动的四种方法
Mr_yq的博客
11-29 1130
清除浮动影响的4种方法：（推荐使用方案四，兼容性最好） 方案一.clearfix{clear:both;} 原理：在父元素中，追加空子元素，并设置其clear属性为both  clear是css中专用于清除浮动的属性  作用：清除当前元素前面的元素浮动所带来的影响  取值：  1、none  默认值，不做任何清除浮动的操作  2、left  清除前面元素左浮动带来的影响 
清除浮动
peichaohang的博客
12-26 195
clear : none; 可选值： - left，清除左侧浮动元素对当前元素的影响 - right，清除右侧浮动元素对当前元素的影响 - both，清除两侧浮动元素对当前元素的影响清除对他影响最大的那个元素的浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
CSS中如何清除浮动的影响
Fengziwei_的博客
12-28 1253
一.认识浮动 1.概念 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。（脱标----脱了标准流） 2.作用 ①浮动可以控制图片，实现文字环绕图片的效果。 ②浮动可以让多个div水平排成一行 二.应用 1.用普通流的大盒子（父级）定义上下顺序---占位 2.使用浮动在大盒子内部，设置小盒子的位置---水平排列 注意：在使用float布局时，如果无法继续向右摆放新盒子，那么将会在下一行显示 三.如何清除浮动 在CSS中，clear属性用.
html中去除浮动影响,css浮动的特性,与浮动带来的影响以及如何清除浮动
weixin_36035750的博客
07-01 488
日常胡说八道:块元素在文档流中默认垂直排列，所以多个div从上至下依次排开如果希望块元素在页面中水平排列，可以使用float来使元素浮动，从而脱离文档流,元素脱离文档流以后，它下边的元素会立即向上移动css浮动的特性1.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围2.元素浮动以后，会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素3.如果浮动元素上边是一个没有浮动的...
如何清除浮动元素所带来的影响？
泠泠似水
12-29 2408
浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以元素浮动之后，其原有位置不再保留，其他元素的位置会受到影响。 如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用 clear 属性来设置。另外，包含框内的子元素浮动后，如果包
清除浮动元素影响的两种方法
liubangbo的专栏
02-01 806
在前一篇文章(https://blog.csdn.net/liubangbo/article/details/104129203)中，我们分析了由于父元素没有设置高度，子元素进行了浮动，所以实现了文字环绕效果(父元素高度塌陷)。这篇文章我们分析一下怎么清除浮动产生的影响(父元素高度塌陷)。 方法1：在子元素后边添加一个空div元素，并设置clear属性 <html> <...
个人关于css中几种取消浮动对于其他元素影响的见解
summer_mood的博客
07-11 5673
1、直接给父级元素添加高度    div可以直接定义width和height，且因为div为块级元素会直接占用其高度所在的行，无法并排存放第二个div。若该div不定义初始高度，则他的高度和宽度由该div中嵌套的元素大小决定，可能是文本元素或者是非文本元素。换一种说法也就是因为使用的是div且没有脱离标准文档流，变会按照块级元素方式进行排列。而若此时子元素中定义了float:left;则该子元素
浮动中的clear属性（66）
weixin_44932552的博客
02-25 373
1.如果我们不希望某个元素因为其他元素浮动的影响而改变位置， 可以通过clear属性来清除浮动元素对当前元素所产生的影响 2. clear - 作用：清除浮动元素对当前元素所产生的影响 - 可选值： left 清除左侧浮动元素对当前元素的影响 right 清除右侧浮动元素对当前元素的影响 both 清除两侧中最大影响的那侧 3.原理： 设置清除浮动以后，浏览器会自动为元素添加一个上外边距， 以...
css笔记：清除子元素对父元素的浮动效果的三种方法
YaoDeBiAn的博客
09-16 7640
清除子元素对父元素的浮动效果的三种方法对于浮动元素，我们知道如果父元素不设置height，而子元素全部设置为浮动，父元素不会被撑开(也就是父元素为一条直线，height为0)，我们看到的就是一条线在所有子元素上面。例如：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clear_float</
HTML入门：clear属性与浮动元素定位详解
当设置为`clear:both`时，它确保指定元素不会与之前已设置浮动的元素在同一行显示，尤其是在图像或表格被`float`属性影响时。例如： ```html 这个是第1项 ;">这个是第2项 <p clear="both">另起一行 ``` 在这个例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值