浮动布局注意点，清除浮动

于 2022-08-05 16:41:11 发布
阅读量195 收藏 1
点赞数
分类专栏： css 前端 html 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aa12364567/article/details/126178979
版权
前端 同时被 3 个专栏收录
199 篇文章 3 订阅
订阅专栏
html
89 篇文章 1 订阅
订阅专栏
css
84 篇文章 1 订阅
订阅专栏

浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了那么其他兄弟也应该浮动，以防引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

由于父级盒子很多情况下，不方便给高度，但是盒子子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
在这里插入图片描述

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动的本质

  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身有高度，这不需要清除浮动
  • 清除浮动后，父级就会根据子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
  • 在这里插入图片描述

清除浮动方法

  1. 额外标签法也称为隔墙法，是W3C推荐的做法
  2. 父级添加overflow属性
  3. 父级添加after属性
  4. 父级添加双伪元素
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
不想上班只想要钱
关注
专栏目录
清浮动的方法
weixin_60542090的博客
08-10 269
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。...
css——浮动布局(float)以及清除浮动
leilei7407的博客
07-07 860
浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。 浮动布局的特点：会让元素脱离文档流（不占据原来的位置），但同时也会有一些副作用（高度塌陷） 为什么需要浮动？ 有很多布局效果，标准流布局无法完成，因为浮动可以改变元素标签默认的排列方式。 举例说明：让多个块级元素在一行显示 方式1：标准流布局方式是将块级元素的display属性设置为inline-block，但这样虽然可以实现，但他们之间会有空白间隙，不好控制。 方式2：可以将，这些块，都设置浮动（即添加float属性），并且浮动方向相.
使用过浮动后要清除
Julie115的博客
07-20 311
1.浮动默认的是左上角或右上角，但是常常下一个元素会受到这个浮动元素的影响。为了解决这个问题，我们经常会需要清除浮动。 2.清除浮动 (1)网页结尾没有内容时候清除浮动的写法： small-img:after｛ content：'\20'; display:block; height:0; clear:both; } 注：small-img是上个盒子模...
清除子元素浮动对父元素高度的影响
weixin_33701251的博客
06-28 759
在利用浮动进行布局时，不免会遇到一些问题。例如，当一个元素的所有子元素都浮动时，该元素的高度会变为零，这将破坏整体布局或导致该元素的背景不能正常显示。 解决办法： 设置父元素的 :after 伪类 .f-clear:after{ display: block; visibility: hidden; height: 0; f...
清除盒子内子元素浮动导致父元素塌陷的5种方法
deyongcai7004的博客
02-05 667
更详细的解释请移动到： 　　地址1：http://www.cnblogs.com/chedabang/p/5973601.html 　　地址2：https://www.cnblogs.com/libin-1/p/5975367.html　　　　　　　　 盒子塌陷是什么？ 何为盒子塌陷，盒子塌陷是由于子元素浮动导致的子元素脱离标准文档流，父元素无法获取子元素的高度而出现的一种现象。...
CSS——浮动float&&清除浮动
LT的博客
06-01 334
浮动 浮动会使元素左右移动，使用了浮动的元素会脱离普通流（标准流）。（可以理解为使用浮动后在原来底层上面又加了一层，浮动便是在加的这层上面显示） 元素添加浮动属性后具有in-block属性（行内块元素）。 什么叫标准流呢？ 标准流就是在网页布局中从上到下、从左到右，遇到块级元素自动换行分布。 浮动的元素以他的父级元素为坐标，进行左浮动或者右浮动，知道碰到下一个浮动元素为止。如下图所示，1、2、3盒子都进行了左浮动；他们的父级元素为body，2进行左浮动时遇到浮动的1便停了下来。 1.float语法
CSS基础：浮动布局详解与清除浮动技巧
本资源主要讲解CSS基础中的浮动布局技术，包括以下几个关键知识点： 1. 结构伪类选择器：结构伪类选择器是CSS中一种根据HTML元素在文档结构中的位置来选择元素的方法，如`:nth-child`，允许开发者通过索引（n值）来...
CSS:清除浮动的最优方法
09-27
值得注意的是，`overflow:visible`在所有浏览器中默认都是生效的，但在IE6下，它可能不会创建BFC，因此不能有效地清除浮动。而`overflow:hidden`或`overflow:auto`则可以创建BFC并解决高度塌陷问题。但是，如果内容...
css别忘记清除浮动clear:both
10-30
此外，这种方法在某些情况下可能会影响布局的美观，例如在列表项之间添加清除浮动标签可能会导致间距不一致。 #### 二、使用`overflow`属性 另一种常见的清除浮动方法是通过设置父元素的`overflow`属性为`auto`或`...
标签增加CSS的overflow属性来清除浮动
09-27
需要注意的是，虽然`overflow`方法是一种有效的清除浮动方式，但在某些场景下，如需要保留内容溢出时，可能需要结合其他方法，如使用`clearfix`类或创建伪元素（如`:before`和`:after`）来清除浮动。在实际应用中，...
浮动的注意事项以及清楚浮动的方法
ftyfghjgutr的博客
01-27 316
浮动的注意事项 浮动注意事项： 1.谁浮动，谁会在页面上漂浮起来，不占页面面积，叫做脱离文档流 2.当元素浮动，会挡住下面的兄弟元素，要给不浮动的元素设置清楚浮动 3.当所有孩子都为浮动，父类会没有面积，解决办法 （1）父类添加高度，但是需要计算 （2）添加一个新的孩子，设置清楚浮动，如果此标签不显示则是垃圾代码 （3）给父类设置overflow：hidden撑开高度 清楚浮动的方法 1.div{overflow：hidden} 2.div：after{contect：“”；display：block：cl
css—清除子元素浮动带给父元素带的影响
ltf-spaceweixin_46032911的博客
02-03 763
css语法： .clearfix, #wrap .content .tap-wrap .tap-content ul { *zoom: 1; } .clearfix:after, #wrap .content .tap-wrap .tap-content ul:after { content: ""; display: block; clear: both; } 运用less语法如下： 1.创建一个less文件，文件名随意，写入下面代码 .clearfix{ *zoom: 1;
【css】清除浮动
jkpazhang的博客
09-02 327
一、为什么需要清除浮动？ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子。 二、清除浮动本质 1.清除浮动的本质是清除浮动元素造成的影响 2. 如果父盒子本身有高度，则不需要清除浮动 3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了 清除浮动的策略是: 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子 三、清除浮动方法 额外标签法也称为隔墙法，是 W3C 推荐的做法
css 高度塌陷_HTML 元素高度塌陷及解决办法
weixin_39927059的博客
12-18 219
首先了解下什么是高度塌陷作为前端开发者都知道，在HTML 中父元素在没有设置高度的时候，其默认高度是会被子元素撑开的，也就是子元素有多高，父元素就有多高，但当其所有子节点都浮动的时候，就会脱离文档流，此时父元素的高度就会丢失。如果在没有设置边框属性的情况下是比较难发现的，并会影响使布局变得混乱，达不到预期布局。如上结构在class="parent" 的子元素没有设置浮动时的效果预期应该是如下所示的...
CSS清除浮动，父元素盒子自适应调整高度
Arcofcosmos的博客
01-21 989
浮动的特性： https://editor.csdn.net/md?not_checkout=1&articleId=122625520 清除浮动 很多情况下，子盒子可能不断增加，父级盒子不方便给出固定高度，但是子盒子若浮动时就会不占有位置，导致父盒子的高度为0，影响下面的标准流盒子的布局。 清除浮动的本质就是清除浮动元素造成的影响，若父级盒子本身有高度，则不需要清除浮动。 清除浮动后，父级就会根据浮动的子盒子自动检测高度，当子元素增加后父级盒子也会随之拓展，父级有高度后就不会对下面的标准流盒子布局
css#原生#清除浮动影响2(对父级元素的影响)
LYR 的博客
06-26 611
蓝色边框塌陷了，没被子元素撑起来 解决高度塌陷的方案：一种方法： 直接在高度塌陷的父元素的最后，添加一个空白的 div 这个 div 没有浮动，（他会跑到父元素的上面，还不能撑开父元素），然后对其清除浮动（他就会跑到子元素的下面），就可以撑开父元素了。 然后就清除浮动了。 这里可以用一个伪元素选择器：是伪元素，不是伪类 .float::after 指的是 子元素的最后一个元素。 这里插入了一个元素，清除了前面的浮动，使得父级塌陷有撑开了。 总结： 标准模板： <style> .
子元素浮动对父元素的影响（高度塌陷）
suandfei的博客
09-08 2290
出现原因： 父元素没有设置宽度和高度，完全是由子元素内容撑起来的，一旦子元素浮动也就是脱离文档流。浏览器渲染时，就好像父元素里面没有内容了。所以就会出现高度塌陷问题。 解决方案 .给父元素设置height 给父元素设置 overflow：auto/hidden 设置父元素 浮动 float:left/right 在所有子元素后面加一个空的table 标签 然后为其设置 clear：both ...
前端学习系列——（六）清除浮动的影响
随风丶逆风的博客
04-27 486
    确切的说是清除浮动造成的影响，但是清除浮动这个说法一传十、十传百，就将错就错，都这么说了。为子元素设置浮动效果后，会导致父元素的高度坍塌。什么意思呢，就如下面的图所示。 .parentBox{ width: 300px; margin: 0 auto; border: 10px solid #f00; } .childBox{ width: 200px;...
浮动的特性和清除浮动的6种方法及其造成的影响
fyw1789的博客
05-02 1503
浮动的特性 1.脱离标准流 2.浮动的元素相互贴靠 3.宽度收缩 清除浮动的方法 1.给父元素设置高度 2. clear属性 3.隔墙法 4.内墙法 5.overflow 6.伪类清除法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值