首页
学习
活动
专区
圈层
工具
发布

css中的clear_html clear用法

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

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

    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.

    2.4K20

    CSS 清理浮动 clear属性

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

    53110

    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

    83120

    在HTML中使用JavaScript

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

    2.3K30

    【HTML代码】在HTML加入图片飘窗的代码

    DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法,dede网站二开,以下龙腾飞网络科技-小吴在建站实操中笔记记录,织梦dede建站教程保存使用非常方便: 【HTML代码】 在...HTML加入图片飘窗的代码 一、在HTML加入图片飘窗的代码-样式1【漂浮】 1)html代码内容:示例 html> 【HTML代码】在HTML加入图片飘窗的代码-样式1【...--js结束--> 二、在HTML加入图片飘窗的代码-样式2【不关闭,直接票】 1)html代码内容:示例 html> 【DEDE建站教程】在HTML加入图片飘窗的代码-样式...--// End --> html> 三、在HTML加入图片飘窗的代码-样式3【飘窗】 1)html代码内容:示例 html xmlns="http://www.w3...content="text/html; charset=utf-8" /> 在HTML加入图片飘窗的代码-样式5【居中关闭,点击展示】 <link rel="stylesheet

    1.8K00

    CSS之after clear「建议收藏」

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

    61620

    在 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 代码需要通过完整的 进行包裹)。

    9K10
    领券