首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css中的clear_html clear用法

之前一直不明白clear的意义何在,一直以为clear就是去掉元素本身都浮动属性(即使元素的float设置为none),如果这样理解就显得clear非常多余。...; } 运行结果: 我们看到div2div1下面了,但是div2的float并没有被清除(不是float:none,而是float:left),也就是说div2还是向left浮动了,为什么这样说呢...此时我们可以明白clear的作用了,就是不让元素本身跟在之前的浮动元素后面,而是之前元素的下一行进行left/right浮动。...应用场景举例 要实现如图的布局: 目前很多人的做法是: “姓名”和“班级”包裹一个div并是这个div向左浮动,然后再使简介向左浮动,示例代码(普遍做法): 利用clear的做法: .div1{ float: left; width: 100px; background-color

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

css中的clear属性_clear啥意思

CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。...2.clear 属性值 1. clear: none -- 允许浮动元素 (默认值) 。 2. clear: left -- 左侧不允许浮动元素 。...1. clear:left 的含义是如果当前元素的左侧有浮动元素,那么就强制该元素另起一行 。 3. clear: right -- 右侧不允许浮动元素 。...1. clear:right 的含义是如果当前元素的右侧有浮动元素,那么就强制该元素另起一行 。 4. clear: both -- 左右侧均不允许浮动元素 。...5. clear: inherit -- 从父元素继承 clear 属性 。 3为什么会有浮动 1. 我们页面正常显示的排版布局中, 元素可分为块级元素与行内元素; 2.

1.8K20

CSS 清理浮动 clear属性

left 表示清除左侧,左侧不允许出现浮动元素;right 表示清除右侧,右侧不允许出现浮动元素;both 表示清除两侧,左右两侧均不允许出现浮动元素。...1)使用带clear属性的空元素 这也是W3C推荐使用的方法,首先在CSS中定义一个清理的 class,然后浮动元素的后面,使用一个空元素 或 。...但是,需要添加无语义的html元素,违背了表现和内容相分离的原则,代码不够优雅,增加了后期维护的难度。 2)借用邻接元素处理 什么都不做,给浮动元素后面的那个元素添加 clear属性。...,容器的末尾,插入一个点 "."...IE7中,把 overflow属性设置为 visible 之外的值,就可以触发布局,IE6则不行。因此,IE6中,可以为容器设置 zoom: 1,来触发布局。

13610

CSS中clear的用法

CSS中clear用法:   clear有四个属性值: clear:left;right;both;none.   作用:该属性指出了不允许有浮动对象的边。...这个属性是用来控制float属性文档流里的物理位置的。   ...当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用:clear...所以我们第三行加一个清楚float(浮动):   css定义为:   p.f1{float:left;width:100px;}   p.f2{float:left;width:100px;}   ...p.f3{clear:both;} 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/155601.html原文链接:https://javaforall.cn

58520

HTML中使用JavaScript

标签相关属性 type属性 标签默认就是JavaScript代码,嵌入javascript脚本时,type属性可以省略 如果type属性的值,浏览器不认识,就不会执行其中的代码,所以可以<...网页 解析过程中,发现带有defer属性的元素 浏览器继续往下解析HTML网页,同时并行下载元素加载的外部脚本 浏览器完成解析HTML网页,此时再回过头执行已经下载完成的脚本...网页 解析过程中,发现带有async属性的标签 浏览器继续往下解析HTML网页,同时并行下载标签中的外部脚本 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本...后面执行 在这段代码后面加载的脚本文件,会等b.ja执行完成后再执行 相关知识点总结 包含在标签内部的JavaScript代码,将被从上到下一次解析 无论以哪种方式嵌入代码,只要不存在...2、避免,DOM结构生成之前调用DOM节点,而产生错误

1.3K30

CSS之after clear「建议收藏」

,这个新加上的内容是加在demo元素里面的,而不是demo元素后面,相当于demo元素 里面创建一个子元素,然后将其内容设置为–good。...所以当要消除本元素浮动给后面元素带来影响时,可以用:after{clear:both},但是不能把after加在浮动元素上,例如下面的例子是不能清楚浮动的影响的: 因为这时候div1浮动,after相当于div1里面创建一个子元素,然后把该子元素的clear属性设为both,子元素是不能消除父元素的浮动影响的。...为了达到消除浮动的效果,我们需要在div1后面(也就是div1和div2之间)创建一个新元素,然后将新元素 的clear属性设置为both,如下: float...然后我们把父元素的after clear设置为both就可以了,如下: float 4

38620

HTML 中嵌入 PHP 代码

PHP 与 HTML PHP 天生对 Web 和 HTML 友好, PHP 诞生之初,主要用于 Web 1.0 中构建个人主页,那个时候,PHP 代表的是 Personal Home Page,随着...一个是标记语言,一个是处理器,可见二者之间的渊源,它们之间的关系甚至亲密到可以直接混合在一起进行编程,PHP 脚本 HTML 文档中只是一种特殊标记而已,并且可以 HTML 文档中直接编写任何 PHP... PhpStorm 中新建 HTML 文件 然后弹出窗口选择新建一个 HTML 5 文件,将文件名设置为 hello: ?... HTML 中嵌入 PHP 代码 接下来,我们 hello.php 中,将上一步 和 之间的 HTML 文本替换成 PHP 代码: <!...小结 由此可见, PHP 文件中,既可以编写纯 PHP 代码,也可以混合 HTML + PHP 代码进行编程( HTML 中嵌入 PHP 代码需要通过完整的 进行包裹)。

6K10
领券