我对css中clear命令的理解

最新推荐文章于 2025-05-06 14:15:06 发布
原创 最新推荐文章于 2025-05-06 14:15:06 发布 · 417 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入解析CSS中的clear属性，澄清其工作原理，并解释了clear:left/right的实际用途。文章指出clear属性仅改变自身位置而非真正清除其他元素，同时揭示clear属性只受先于它显示且具有相同float值的元素影响。

clear这个命令之前一直理解为clear:left—就是清除元素左边的其他元素，但实际效果却并不是这样让人越想越糊涂，网上搜索了一下看到一位大神的文章:
《准确理解CSS clear:left/right的含义及实际用途》有启发但还是有些模糊，大概是每个人的语言理解差异所致，所以想用自己能理解的语言记录在这里，以下是我的理解：

  1. clear只能改变自身的位置，他的清除并不是真的清除其他元素而只是改变自身位置使得自身位置看上去满足清除效果；

  2. clear的效果只会被代码中先于他显示的其他元素激活不会对在他之后才显示的元素激活，而且这些先于他显示的元素的float的值要与clear的值相同，也就是说clear:left 只会被其他float:left的元素激活。

    以上就是我对clear的理解，我是刚由C/S转B/S错漏之处在所难免，多多指正！！

gzwlj2001
关注
CSS clear both清除浮动
易天海
01-29 1430
http://www.divcss5.com/rumen/r424.shtml  CSS clear both清除浮动 DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。 接下来我们来认识与学习css clear知识与用法。 一、clear语法与结构 - TOP...
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9967
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
clear
cxzhq2002的杂记
03-08 523
aaaaaaaaaaaaaaaaaaaaaaaa11111111111111111111111111111111111111111该属性的值指出了其本身旁边不允许有浮动对象==========================clear版本：CSS1　 兼容性：IE4+ NS4+　继承性：无语法：clear : none | left |right | both 参数：none : 　允许两边都可以有浮动对象both : 　不允许有浮动对象left : 　不允许左边有浮动对象right : 　不允许右边有浮动
经验分享：CSS浮动(float,clear)通俗讲解
weixin_33714884的博客
03-27 7459
       很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。        写在前面的话：        由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。        如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...
css中clear的含义
12-24 1550
首先更正一点clear不是一个标签，它是css中的一个属性。 其属性值有四个clear:both|left|right|none。 简单来说，clear的作用是“清除”浮动。 如果某元素设置clear:left，表示该元素左边不存在浮动元素，相应的，clear:right表示该元素右边不存在浮动元素；clear:both表示两边都不存在浮动元素。clear:none表示两边允许有浮动元...
CSS：clear
雷爷的博客
09-03 975
<!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-...
CSS开发全攻略
邓邓子的博客
09-25 2114
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
【核心基础知识】如何管理CSS代码
仰望星空的代码
07-03 454
尽管 CSS 提供了 import 命令支持文件引用，但由于其存在一些问题（比如影响浏览器并行下载、加载顺序错乱等）导致使用率极低。更常见的做法是通过预处理器或编译工具插件来引入样式文件。 将样式文件进行分类，把相关的文件放在一起，让工程师在修改样式的时候更容易找到对应的样式文件，在创建样式文件的时候更容易找到对应的目录。管理样式文件的目的就是为了让开发人员更方便地维护代码。 一、开源项目中的样式文件 先来看看著名的 UI 相关的开源项目是怎么管理样式文件的。 （1）Bootstrap：https:
通过HTML5 Canvas和JavaScript在浏览器中使用命令控制台
04-11
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。这个技术基于JavaScript，使得开发者可以...这样的实践有助于提升开发者对Web前端技术和用户体验设计的理解。
css笔记
PrimaryColor
07-30 553
css(层叠样式表) CSS的发展历程 从HTML被发明开始，样式就以各种形式存在不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制 最初的HTML只包含很少的显示属性 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能 但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿于是CSS便诞生了. CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者 让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets
CSS的clear属性
weixin_30385925的博客
10-22 118
以下引用自w3school clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 ...
css clear的理解
SakuraLLj的专栏
09-09 1793
之前一直不明白clear的意义何在，一直以为clear就是去掉元素本身都浮动属性（即float:none）。最近再次接触到clear才弄明白clear的本来意义。 下面直接看实例： 1. 没有清除浮动<html> <head> <style type="text/css"> .div1{ float: left;
CSS之Clear属性
qq_34550459的博客
04-17 651
元素的clear属性: box1向左浮动,脱离文档流(不再占用位置),box2将自动向上移动,位置发生了改变 如果不想让下边的元素的位置发生改变 为了解决这个问题:可以设置元素的clear属性: 清除浮动元素对当前元素的位置的影响 clear: 作用:清除浮动元素对当前元素的影响 可选值； left:清除左侧浮动元素对当前元素的影响 right:清除右侧浮动元素对当前元素的影响 both:清除左/...
css中的clear属性
rt5476238的博客
12-28 562
所有主流浏览器都支持 clear 属性。 clear 属性规定元素的哪一侧不允许其他浮动元素。 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能 可选值： none，默认值，不清除浮动 left，清除左侧浮动元素对当前元素的影响 right，清除右侧浮动元素对当前元素的影响 both，清除两侧浮动元素对当前元素的影响 ...
CSS clear 属性
最新发布
徐尧的博客
05-06 589
使用场景 2.1 清除浮动影响 .footer { clear: both; /* 避免被上方浮动元素影响 */ } 2.2 创建换行效果 .new-section { clear: left; /* 在左浮动元素后换行 */ }
css clear:left 的本质
ISaiSai的专栏
09-16 744
css clear：left 的本质 是margin-top 默认设置了一个和上一个浮动元素相同高度的值
说说css clear属性
little_newBee的博客
05-17 710
以下均是自己的一些理解，希望如果有大神看到不足之处还请多批评指责，刚入门前端，算是自己做的一个小笔记。经常看到有人使用clear：both清除浮动，开始就是跟着用，现在发现自己都不知道这个东西什么意思，就用来使用，应该搞清楚它清浮动的原理之类，于是查了些资料，就来这里胡说八道一番。 元素被设置为float之后，会产生display：inline-block和高度塌陷的特性，那么一般就是咱们所看到了外
css clear用法
piaoxuan1987
05-31 819
clear属性值有四个clear:both|left|right|none; 作用：该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。  当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clea
css中clear的理解
Night_Emperor的博客
07-06 1192
<!DOCTYPE html> <html> <head> <title>demo</title> <meta charset="utf-8"> <style type="text/css"> .c-1{ background-color: red; width: 120px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值