清除浮动(带来的影响) clear与margin重叠

CSS清除浮动与margin重叠
最新推荐文章于 2020-09-24 00:50:36 发布
最新推荐文章于 2020-09-24 00:50:36 发布
阅读量230 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/qianphong/p/10375847.html
本文探讨了在CSS布局中使用clear属性清除浮动时margin重叠的问题，并对比了使用BFC（块格式化上下文）通过overflow:hidden解决此问题的方法。文章指出，clear:both虽能清除浮动，但会导致子元素margin-bottom失效，而使用BFC则可以有效避免这一问题。

  • 【CSS】【清除浮动(带来的影响) clear与margin重叠】

  • 1.用clear清除浮动(在浮动元素的底加入div且设置clear:both;)，会发生margin重叠显现

  • 2.用BFC清除浮动(在浮动元素的父元素上加入overflow: hidden;)，则会把整个元素包起来，从而不会发生margin重叠现象

　　(PS：只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。)

　　第一个是使用了"clear:both"但是它会与margin重叠，则margin-botttom无法发挥作用；在父级DIV加上边框 margin-botttom可以发挥作用

　　第二个是使用了“overflow：hidden”使得元素BFC化，包裹好了，不影响margin-bottom发挥作用

转载于:https://www.cnblogs.com/qianphong/p/10375847.html

【高频考点精讲】BFC原理与应用：彻底搞懂浮动、清除浮动和margin重叠的解决方案
全栈老李的博客
06-12 1017
想象一下，BFC就是一个独立的小宇宙，里面的元素再怎么折腾，都不会影响到外面的世界。官方定义是：BFC是Web页面的可视化CSS渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。内部的盒子会在垂直方向上一个接一个地放置盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠每个元素的左外边缘（margin-left）会触碰到包含块的左边缘（对于从左往右的格式化，否则相反）
HTML+CSS浮动和清除浮动的效果及其应用场景举例
可可的博客
08-22 1262
清除浮动的方法在网页布局中具有广泛的应用场景，主要用于解决由于使用浮动属性引发的布局问题。父容器高度计算问题场景：当使用浮动元素时，父容器的高度可能无法自动调整以包含浮动的子元素。这会导致父容器的高度不正确，从而影响布局，尤其是在包含浮动元素的父容器之后的元素可能会出现重叠或布局错位的问题。解决方法：使用清除浮动的方法来确保父容器的高度正确计算。常见方法包括：伪元素（.clearfix）clear 属性overflow 属性2. 复杂的网格布局。
css中clear与margin的相互作用
a_xin111的博客
12-13 1119
lear与margin的相互作用 1. clear与margin的重叠 请看如下代码： 1.     clear:both; 本文字离图片的距离是100px   2. 本文字离图片的距离是200px   在上面代码中，第一段文字里图片的距离是100px；               第二段文字里图片的距离是200px 分析：浮动会使父元素高度塌陷，第一个
清除浮动和垂直外边距重叠问题
weixin_43889695的博客
03-28 272
用after伪类选择器 代码如下 .clearfix::before, .clearfix::after { content:' '; display: table; clear:both; } 用这种方式既可以解决因为浮动造成的父元素高度塌陷问题，也可以解决子元素将垂直外边距传递给父元素的情况。 ...
解决加了clear:both,margin不起作用问题
苹果咏的博客
08-19 3017
在父级加 overflow: hidden;
css中clear:both属性的理解及用法
weixin_44354089的博客
05-18 9724
css中clear:both属性的作用是清除浮动，设置了浮动就会破坏文档流结构，影响后边的布局，此时在设置清除浮动便可解决这一问题，可以认为，设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，并渲染自己的样式，但实际上前边元素中设置的浮动属性对他本身仍未失效。有些绕，解释一下 例如：前两个span元素均设置了float:left属性，但当第三个span设置clear：both时，前两个元素的float属性没有影响到第三个span,作为行内元素他们都显示在一行
浅谈css margin重叠
09-24
2. 给父元素添加必要的清浮动属性：当子元素浮动后，父元素有可能高度塌陷，为了解决这个问题，需要在父元素上清除浮动，常用的清除浮动的方法有在父元素内添加一个带有clear属性的空元素或使用伪元素的方法。...
clear:both后margin-top不起作用其他左右下都起作用
09-25
在这种情况下，`clear:both`的`margin-top`不起作用的原因在于，它是针对清除浮动的效果，而不是影响元素自身的垂直外边距。`clear:both`实际上创建了一个新的块格式化上下文（Block Formatting Context, BFC），在...
CSS 外边距(margin)重叠及防止方法
12-13
同时，元素的`margin-top`不会与设置了清除操作（如`clear:both`）的父元素的`margin-bottom`重叠。 8. 根元素（HTML元素）的垂直外边距不会重叠。 外边距重叠在实际布局中有着实际意义，例如避免段落之间的间距过...
html css float left与 float right的使用说明
weixin_33719619的博客
02-12 902
点评： CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。但仅仅是如此吗？详细出处参考：http://www.jb51.net/css/33740.html No! 要注意以下几点： 1、 浮动元素会被自动...
让上下两个＜div＞不要重叠 下面＜div＞加上style=“clear:both；“清除浮动
自述天地
09-24 1360
<template> <el-row class="tac" style="height: 100%"> <ts-header :headerTitle="headerTitle" :preUrl="preUrl"> </ts-header> <el-col :span="1" style="height:1px"> <ts-portal-menu :...
margin击穿问题(margin折叠问题)
weixin_42206785的博客
11-19 1283
问题如下 一段很简单的代码： css如下： &amp;lt;style type=&quot;text/css&quot;&amp;gt; *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; heig...
原生JS获取高度方法，去除padding、border、margin
hapyss的博客
10-18 9369
一、常规知识： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWi...
乐播投屏v5.5.76
最新发布
09-06
乐播投屏是一款简单好用、功能强大的专业投屏软件，支持手机投屏电视、手机投电脑、电脑投电视等多种投屏方式。 多端兼容与跨网投屏：支持手机、平板、电脑等多种设备之间的自由组合投屏，且无需连接 WiFi，通过跨屏技术打破网络限制，扫一扫即可投屏。 广泛的应用支持：支持 10000+APP 投屏，包括综合视频、网盘与浏览器、美韩剧、斗鱼、虎牙等直播平台，还能将央视、湖南卫视等各大卫视的直播内容一键投屏。 高清流畅投屏体验：腾讯独家智能音画调校技术，支持 4K 高清画质、240Hz 超高帧率，低延迟不卡顿，能为用户提供更高清、流畅的视觉享受。 会议办公功能强大：拥有全球唯一的 “超级投屏空间”，扫码即投，无需安装。支持多人共享投屏、远程协作批注，PPT、Excel、视频等文件都能流畅展示，还具备企业级安全加密，保障会议资料不泄露。 多人互动功能：支持多人投屏，邀请好友加入投屏互动，远程也可加入。同时具备一屏多显、语音互动功能，支持多人连麦，实时语音交流。 文件支持全面：支持 PPT、PDF、Word、Excel 等办公文件，以及视频、图片等多种类型文件的投屏，还支持网盘直投，无需下载和转格式。 特色功能丰富：投屏时可同步录制投屏画面，部分版本还支持通过触控屏或电视端外接鼠标反控电脑，以及在投屏过程中用画笔实时标注等功能。
spring-ai-alibaba-starter-tool-calling-openalex-1.0.0.3.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
【微信小程序源码】阅享小程序（阅读评价类）.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
google-cloud-monitoring-3.68.0.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
浮动元素闭合：float、clear与overflow解决方案
1. **清除浮动（Clearing Floats）**：在浮动子元素后面添加一个额外的非浮动元素，并应用`clear: both`样式，或者直接在父元素末尾使用CSS的`clear:both`。这使得后续元素不再考虑浮动元素的影响，从而恢复正常的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值