clearfix清除浮动的4种写法

最新推荐文章于 2024-05-05 07:41:03 发布
最新推荐文章于 2024-05-05 07:41:03 发布
阅读量261 收藏
点赞数
文章标签： css3 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a877189987/article/details/120985001
版权

1.额外标签法:

 

 

 

在后面添加一个新标签，再写一个clear的样式 

2.父级添加overflow方法

 3.after伪元素方法

 

 

伪元素默认是行元素，所以要转成块元素

 

:after伪元素相当于 在后面添加了一个盒子（块元素)

4.双伪元素清除方法

 

 

I care541
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css中clearfix清除浮动的用法及其原理示例介绍
09-25
大家对css中clearfix并不陌生吧，它的作用就是清除浮动，下面对clearfix的定义及实现原理简要的为大家做个介绍，另外还有个不错的示例，喜欢的朋友不要错过
clearfix的用法
Legend的博客
11-20 2069
如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有 clear，导致不能被撑开。看下面的例子： div 的布局如下： css的写法如下： 浏览器的显示如下： 传统的解决方法如下： 但是，这么多加一个DIV有点不妥。一是多了一个没有意义的DIV，二是在用dojo做Drag & Drop的时候，由于这个DIV是容器DIV的一个字
CSS中常用的clearfix方法
King的博客
07-06 2313
常用的清除浮动(clearfix)方法： 清除兄弟元素带来的浮动影响 方法一：在浮动元素后新增一个空div标签，设置 clear:both; 方法二：在有影响的兄弟元素中设置 clear:both; 清除子元素给父元素带来的浮动影响 方法一：给父元素设置 overflow:hidden; 可加*zoom=1;用于兼容IE6 方法二：使用after伪元素清除浮动.outer::after{ ...
clearfix详解
weixin_43269800的博客
01-03 2039
clear clear属性可以用于清除元素周围的浮动对元素的影响。 也就是元素不会因为上方出现了浮动元素而改变位置。 • 可选值： – left：忽略元素左侧浮动影响 – right：忽略元素右侧浮动影响 – both：忽略元素两边浮动影响 – none：不忽略浮动，默认值 清楚浮动方案 1、可以在父元素的底部，添加一个空白的块级元素，并且给该元素设置clear：both；（兼容各种浏览器，w3c...
CSS中使用clearfix清除浮动的方法
09-25
主要介绍了CSS中使用clearfix清除浮动的方法,作者列出了几个clearfix的不同的使用方法进行对比,需要的朋友可以参考下
css hack之清除浮动(clearfix)
12-09
但这样增加了页面的结构的源代码，造成代码的拥肿，其实也可以有更好的办法， 在浮动元素的外包clearfix样式 复制代码代码如下: ”clearfix”> ”fl”></div> ”fr”></div> </div> .clearfix:after{ visibility:...
清除浮动 clearfix
MOUNTAIN_SEA1的博客
08-09 1527
清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。 父级有了高度， 就不会影响下面的标准流了。
【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-29 1611
一、清除浮动 - 使用双伪元素清除浮动 二、代码示例
浅谈css清除浮动(clearfix和clear)的用法
12-13
本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML>   <html lang="en-US">   <head>       <meta charset="UTF-8"/>       <title>如何在html中使用clearfix和clear</title>       <link
css之clearfix的用法深入理解(必看篇)
09-24
下面小编就为大家带来一篇css之clearfix的用法深入理解(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
【css】浮动与clearfix（清除浮动）
m0_62811051的博客
03-18 808
我们首先要知道，在浮动布局中父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失以后，其下的元素会自动上移，导致页面混乱。container之中包含一个 item 子元素，代码如下item此时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px。
clear-fix清除浮动的两种写法
dfe3318的博客
03-31 246
1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; } 2. [代码]clea...
前端面试题-clearfix（清除浮动）
weixin_33998125的博客
03-12 2286
一、浮动的概念 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 二、浮动的影响 1. 浮动会导致父元素高度坍塌 父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为0，这也就导致了父元素高...
【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件
m0_49471668的博客
04-29 528
【代码】【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件。
CSS3 animation (动画) 属性
Winsom1的博客
04-28 763
animation-fill-mode 动画结束状态， 默认 backwards 回到起始 forwards 保持。animation-play-state 鼠标放上运行或暂停，默认 running不暂停 pause 鼠标放上暂停。animation 所有动画属性的简写属性，除了animation-play-state属性。linear 匀速。
CSS3（响应式布局）
l_al_al_a的博客
04-27 1705
/只在x方向上重复。//只在y方向上重复。//前一个时间用于表示过渡效果持续时间，后一个时间用于表示过渡效果的延迟。# 和 #注意：其中angle对应单位为：deg。# 及 #
html--魔方
最新发布
stqer的博客
05-05 735
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> :root { --cube-size: 50vmin; --side-size: calc(var(--cube-size) /
clearfix清除浮动代码
09-09
clearfix清除浮动的代码有多种方式可以实现。其中一种常用的方式是使用伪元素来清除浮动。可以在父元素中添加一个伪元素，并设置其clear属性为both。这样可以清除前面元素的所有浮动带来的影响。 具体的代码如下所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值