文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

文章目录 一、清除浮动 - 使用双伪元素清除浮动 二、代码示例 一、清除浮动 - 使用双伪元素清除浮动 ---- 为 .clearfix:before 和 .clearfix:after 并集选择器 ,...设置如下样式 : /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix:after { content: ""; display...: table; } 为 .clearfix:after 伪类选择器设置如下样式 : .clearfix:after 伪元素选择器 的含义是 在 该父容器盒子 的内部 , 插入新的子元素 , 该子元素设置选择器中的样式...DOCTYPE html> 清除浮动 - 使用双伪元素清除浮动</title...:after { clear: both; } .clearfix { *zoom: 1; } /* 清除浮动 - 使用 after 伪元素 ( 方法三 : 最流行写法

7K51
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【说站】css浮动元素的规则介绍

    css浮动元素的规则介绍 说明 1、当浮动元素浮动时，其margin不会超过包含块的padding。 如果想要超过元素，可以设置margin属性。...如果两个元素一个向左浮动，另一个向右浮动，左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。 2、若有多个浮动元素，浮动元素将按顺序排列而不重叠。...后面的元素高度不会超过前面的元素，也不会超过包含块。 3、如果非浮动元素和浮动元素同时存在，非浮动元素在前面。 浮动元素不会高于非浮动元素。浮动元素会尽可能对齐顶部、左右。 实例 浮动元素的规则介绍，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏

    92420

    【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

    额外标签法 清除浮动 , 会 新增很多无意义标签 , 使得 HTML 标签结构混乱 ; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏 , 或 生成滚动条 , 导致显示结果不理想 ; 这里提出第三种...清除浮动的方法 , 使用 after 伪元素清除浮动 ; 2、after 伪元素清除浮动简介 在 CSS 样式最上面 , 声明 清除浮动元素样式 , 将选择器设置为 .clearfix:after ,..., 不会改变标签的结构 , 也不会出现隐藏移除元素的问题 ; 3、after 伪元素清除浮动核心代码 核心代码示例 : CSS 样式代码 : /* 清除浮动 - 使用 after 伪元素 ( 最流行写法...使用 :after 伪元素 , 会在 父容器 中 , 生成一个新标签 , 放在了 父容器 盒子的末尾 , 相当于添加了一个 空盒子 , 类似于额外标签法 ; 这种使用 CSS 添加新标签的方式 , 在...标签结构中不可见 , 没有影响到 HTML 标签的结构 ; 二、使用 after 伪元素 - 代码示例 ---- 使用 after 伪元素 - 代码示例 : <!

    1.4K20

    【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

    的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行...没有设置高度 , 并且设置了浮动 , 如果不清除浮动 , 后续排列都会出现问题 ; 参考 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析...) 【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 ) 博客清除浮动 ; 使用 /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix...; 清除浮动时 , 给要清除浮动的 父容器 , 设置 clearfix 样式 ; 二、清除浮动代码示例 ---- 首先 , 在 CSS 样式中 , 定义 使用双伪元素清除浮动 的样式 ; /* 清除浮动...- 使用双伪元素清除浮动 */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after

    1.7K20

    【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )

    文章目录 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 二、行内块元素的摆放缺陷 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 ---- 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式...在 浏览器 指定位置 显示 ; 普通流 相当于 Android 中的 线性布局 ; 浮动 相当于 Android 中的 帧布局 或 相对布局 或 约束布局 ; 定位 相当于 Android 中的...绝对布局 ; 二、行内块元素的摆放缺陷 ---- 行内块元素的摆放缺陷 : 缝隙无法控制 : 行内块元素 之间 有缝隙 , 该缝隙大小无法控制 ; 排列顺序无法控制 : 行内块元素只能从左到右进行排列..., 不能 左右对齐 或 右对齐 排列 ; 下面的示例中 , 行内块元素之间始终有一条 无法控制的缝隙 ; 行内元素代码示例 : css"> /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } div { display

    91930

    css面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用

    浮动的定义 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。...浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局 当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 为什么要清除浮动？...清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。 当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。...高度塌陷 如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。...内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

    1.4K20

    【CSS】使用绝对定位 浮动解决外边距塌陷问题 ( 为父容器 子元素设置内边距 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

    父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了 上外边距 , 结果将 父盒子也带下来了 ; 1、没有塌陷的情况 代码示例 : <!.../ 边框 ---- 这里使用传统方法 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 为父容器设置 1 像素的 内边距 ; .father { width: 400px;...style> 展示效果 : 三、使用浮动解决外边距塌陷...- 为子元素设置浮动 ---- 为子元素设置浮动 , 可以解决 外边距 塌陷问题 ; 代码示例 : <!.../ 边框 */ /*padding: 1px;*/ } .son { /* 为子元素设置浮动 解决外边距塌陷问题 */ float: left; width: 200px

    2.3K20

    CSS伪元素的基本使用

    CSS伪元素的基本使用 上一篇文章介绍了很多个伪类的使用，这篇来说一下伪元素。 伪元素之所以称为“伪”，主要是因为它不是真正网页里的元素，但是标线行为又跟真正网页元素一样，也可以对其使用css操作。...这可以用于在VTT轨道的媒体中使用字幕和其他线索。多使用在视频的文本显示上。...四、::first-letter 修改块级元素的第一行的第一个字母，比如你经常看到故事书中的第一个文字是大写的，就可使用它在页面上做对应的设置 五、::first-line 用在块级元素上的第一行 六、...::selection 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分） 简单来说就是修改我们用鼠标选中的文字的颜色和背景色 七、::slotted() 用于选定那些被放在 HTML...模板 中的元素，这对于我们现在使用框架而不是再自创标签的用户来说，很少会用到

    1.5K00

    【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

    在这里，10px的padding * 2 + width(auto) = 200px(参考元素的宽度) 我们再对上面CSS更改一下,将inner-auto的部分修改为： .inner-auto{...那么当我们使用定位导致这种情况的时候应该怎么办呢？...四.浮动将打破这种层叠关系，倘若我们给div1,dv2,div3加上浮动 .div2,.div3,.div4{ float: left; } demo: ?...2.浮动流的起始位置由最先设置浮动的元素未浮动时的位置决定 我们再回到上述的例子，div2,div3,div4向左浮动的时候 ? 浮动流的起始位置被最先设置浮动的元素原本的位置决定了。...其他元素的只能跟在“领头浮动元素”的后面 但即使其他元素的没有跟在“领头元素”的后面，而是向相反方向浮动，也始终不能高于“领头浮动元素” .div2,.div3{ float: left; }

    2.9K110

    使用 CSS 伪元素需要注意的

    伪元素 ::before，::after 1. 空元素(不能包含内容的元素)不支持 ::before，::after IE 不支持的元素有：img，input，select，textarea。...FireFox 不支持的元素有：input，select，textarea。 Chrome 不支持的元素有：input[type=text]，textarea。 2....必须设置 content 属性 若不设置，则伪元素不会显示。如果不想设置 content 的内容，可以将内容设置为空。...若 content 的属性值不遵循如上要求，则伪元素不会显示。 4. content 的属性值中如何设置特殊字符？...对内容的开头是符号，或者第一个是英文字母或数字，第二个是符号的，使用 ::first-letter 来设置样式时，会对第一个字母和符号都生效。好违反直觉。

    1.3K20

    CSS进阶07-浮动Floats

    内容沿着左浮动框的右侧向下流动，并沿右浮动框的左侧向下流动。下面我们来看一下 浮动定位 和 内容流。 2.浮动对布局的影响 浮动盒将向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动的外边缘。...换句话说，如果行内级盒先于左浮动被放在行盒中，而行盒的剩余空间可以容纳左浮动，那么左浮动会被置于该行内，且与行盒顶部对齐，而已经放入该行盒的行内级盒会被相应地移动到浮动的右侧（右侧即是左浮动的另一侧），...该属性值具有如下含义： left 该元素生成一个浮动到左侧的块盒。内容在盒的右侧从顶部向下流动（受clear属性限制） right 该元素生成一个浮动到右侧的块盒。...将块的上边框边缘top border edge放在其假定位置的必要高度。 二选一的话，空隙高度即第一种。 注：两种方式在目前的网页内容的兼容性上有待评估。未来的CSS规范将规定为其中一个或另一个。...3em = -1em 当 clear 设在浮动元素上时，将造成第3节所述浮动定位规则的修正。

    2K40

    【CSS】图片底部空白缝隙处理 ( 使用居中对齐 顶部对齐 底部对齐 | 将行内元素 行内块元素转为块级元素 )

    一、图片底部空白缝隙问题 在上一篇博客中 , 使用默认的基线对齐 , 会发现 行内块级元素 中的 图片与文字 默认的对齐方式下 , 图片下方有一条缝隙 ; 出现这条缝隙的原因就是 图片的底部 与...文字的基线对齐 , 上面图片与边框之间的风险 , 就是基线与底线之间的距离 ; 二、图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) ---- 使用 vertical-align...的 其它三种对齐方式 居中对齐 / 顶部对齐 / 底部对齐 , 都可以解决该问题 ; 代码示例 : <!...图片底部与文字底线对齐 显示效果 : 下图中 基线对齐 方式 , 图片底部有一块缝隙 , 其它三种对齐方式底部都没有缝隙 ; 三、图片底部空白缝隙问题解决方案二 ( 将行内元素.../ 行内块元素转为块级元素 ) ---- 使用 vertical-align 垂直对齐 方式 的前提是 作用对象必须是 行内元素 / 行内块元素 , 如果作用对象不是上述元素 , 则垂直对齐不生效 ,

    3.4K50

    CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

    前言 上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识，这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识，一起来看看吧。...3.清除Clear 专门用来清除浮动 div{ clear:both } left 清除左侧浮动 right 清除右侧浮动 both 清除左右两侧浮动 none 允许浮动 4...block 元素将显示为块级元素，此元素前后会带有换行符。 inline 元素将被显示为内联元素，元素前后没有换行符。...元素会作为一个表格标题显示（类似 ） 此时的块级元素div就有了内联元素的特性了 参考文档：W3C官方文档（CSS篇） 总结 这篇文章主要介绍了CSS样式更改篇中的裁剪...、Z-Index、清除、改变元素的特性，希望让大家对CSS样式有个简单的认识和了解。

    3.2K20

    前端课程——浮动

    理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。 将HTML页面中的元素自，上向下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。...有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。 浮动 float属性指定一个 元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。...该属性具有以下几个值: . none:默认值，表示元素不浮动。 left: 表示元素必须要浮动在其所在容器的左侧。 right:表示元素必须要浮动在其所在容器的右侧。...both: 元素被向下移动用于清除之前的左右浮动。 clear属性的使用可以分别以下两种情况: 使用clear属性为非浮动元素清除浮动时，该元素将移动到之前浮动元素的下方。...子级元素设置浮动 解决方案： 为父级设置高度（不推荐） 块级格式化上下文（BFC） 开启方式如下几种： 将元素设 置为浮动(元素的CSS样式属性float值不为none ) 将元素

    1.2K31

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 ) 【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置...| 代码示例 ) 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display...是 不脱标 ( 脱离标准流 ) 的 , 原来的位置还会进行保留 ; 8、子绝父相 - 子元素绝对定位 父元素相对定位 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用...可以改变显示模式 , 将 元素的显示模式 改为 行内块 显示模式 ; 使用 浮动 , 也可以 将 块内元素 改为 类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置 ; 绝对定位 和...固定定位 都可以到达 将 元素转为 行内块显示模式 的效果 ; 行内盒子 , 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ; 浮动元素

    2.9K10

    PHP中使用if的时候为什么建议将常量放在前面？

    PHP中使用if的时候为什么建议将常量放在前面？...在某些框架或者高手写的代码中，我们会发现有不少人喜欢在进行条件判断的时候将常量写在前面，比如： if(1 == $a){ echo 111; } 这样做有什么好处呢？...划重点：这样的写法php是不会报错的，这也是有可能造成BUG的情况。 那么反过来呢？...常量是不能被赋值修改的，不管是数字、字符串还是系统或者我们自己已经定义了的常量。 其次，这种情况下你要是还发现不了这里有问题的话也没关系，运行起来也会报错的，代码是无法继续向下运行的。...当然，这只是一个小技巧，而且最主要的目的是为了应对精心带来的问题。所以并不是强制的规范，有些公司可能会在代码审计或者规范文档中强调这样写法，当然，最好的还是我们要杜绝这种粗心带来的错误。

    1K20

    CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    黄色块div元素 使用 opacity:0; 时 ? 黄色块div元素 使用 visibility:hidden; 时 ? 黄色块div元素 使用 display:none; 时 ?...可以看出，使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间。...可以看出，使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility...使用 display:none; 就不用举例子了，因为使用 display 属性的话，元素不仅看不见，而且也不占据页面空间，所有不会触发事件。...总的来说，使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的。

    2.3K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券