css清除父元素盒子塌陷的方法

最新推荐文章于 2024-11-01 10:18:14 发布

夏蝉暮雪

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量79

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_66514297/article/details/132676694

版权

（1）额外标签法：在父元素内容最后面加一个块级元素设置css属性为clear：both

（2）单位元素法：给父盒子设置css属性为.box::after{

content:""

display:block;

clear:both;

}

(3)双为元素法：.box::after , .box::before{

content:""

display:table;

}

.box::after{

clear:both

}

(4)给父级添加overflow 溢出隐藏

overflow：hidden

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏蝉暮雪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

父元素高度塌陷的解决办法

m0_46382643的博客

03-02

3817

为什么要清除浮动？是因为浮动元素不再占用原文档流的位置，对后面的元素排版产生了影响，所以要在该元素中清除浮动。更准确的说，是为了清除元素浮动后的影响。清除浮动的方法： 1：给父元素设置高度，如下图：注：只适合高度固定的布局。 2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图：注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的...

css拓展--盒子高度塌陷问题及其解决方法

zxn200125的博客

10-13

620

盒子高度塌陷问题及其解决方法

1 条评论您还未登录，请先登录后发表或查看评论

解决父元素高度塌陷的2种方法

li3196672779的博客

05-31

1516

html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> section{ background: gray; } article{ width: 50%; float:

解决子元素浮动造成父元素高度塌陷的问题的几种方法

贪吃ღ大魔王

04-15

2702

解决子元素浮动造成父元素高度塌陷的问题的几种方法第一种：clear清除浮动在浮动元素后的同级元素直接用clear清除前一元素的浮动第二种：伪类清除浮动一个父级元素内所有子元素都为浮动元素，则在父级元素尾部自动创建一个非浮动块状元素第三种：子级方法在子元素的最后添加一个高度为0的子元素，并且让他清除浮动第四种：父级方法（1）给父元素设置display:inline-block;

消除父元素塌陷现象

weixin_43918847的博客

01-10

326

我们有时会遇到这样的情况：当我们对子元素设置margin-top：100px; 时，子元素相对于父元素位置不变，但是父元素却向下移动100px距离。子元素设置margin前子元素设置margin后遇到这种情况有三种解决方法： 1.可以为父元素定义一个上边距 border: 1px solid transparent; 2可以给父元素设置一个padding值 padding-top:1p...

html解决父元素塌陷问题

fangqi20170515的博客

04-01

1034

方法1：给塌陷的父元素的最后添加一个没有意义的子容器 both：清除所有。也可以只清除left/right，但是一般清除所有 .clearDiv { clear: both;//清除所有（也可以只清除） } .left{ float:left; } .right{ float:right; } <div> <div class=left></div> <div class=right></div> //添加的没有意义的子容器

详解CSS盒子塌陷的5种解决方法

12-14

CSS盒子塌陷是一种常见的布局问题，它发生在父元素由于其浮动子元素而无法正确计算自身高度时。在正常情况下，父元素应该包含所有的子元素，但当子元素设置了浮动（如`float:left`或`float:right`），它们会跳出父...

CSS中解决父布局塌陷问题

m0_53521757的博客

07-02

779

CSS中解决父布局塌陷问题因为子元素浮动后，会脱离文档流。导致子元素无法撑起父元素的高度，造成父元素高度塌陷（父元素占据子元素原来的位置，此时父元素也没有设置高度，没有内容撑开父级高度）起始状态 <style type="text/css"> #div_01{ background-color: antiquewhite; } #div_02{ height: 100px;

CSS中的元素定位方法详解

12-13

不清除浮动可能会导致父元素高度塌陷。 4. 盒模型属性：包括边框border、内边距padding和外边距margin。边框可设置宽度、样式（如solid、dotted等）和颜色。内边距是内容与边框之间的距离，外边距则是元素与其他...

CSS高度塌陷问题（float塌陷&margin塌陷）

YANGMENGZHENG的博客

11-08

2552

一、什么是盒子高度塌陷？ 1、解释当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。 2、代码示例 ...

CSS高度塌陷问题及解决方法

qq_45799465的博客

01-23

5096

触发条件包含结构,所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷。例如：解决方法一：给父元素添加固定高度。缺点:不适合高度自适应的布局。代码： <style> *{ margin: 0; padding: 0; } ul{ /* 给父元素设置固定的高度 */ height: 600px;

盘点解决父级塌陷问题（父元素坍塌问题）五种解决方法！！！！

LovelyHeart的博客

08-01

3638

解决父级塌陷问题（父元素坍塌问题）五种解决方法

CSS 解决父级边框塌陷问题的四种解决办法

weixin_68548138的博客

05-14

3074

文章目录1.通过设置父元素的高度解决父级边框塌陷2.通过浮动元素后加空白div解决父级边框塌陷3.通过after伪类实现解决父级边框塌陷4.通过为父级边框添加overflow属性现解决父级边框塌陷 1.通过设置父元素的高度解决父级边框塌陷弊端高度不好把控元素固定高度会降低扩展性 <html> <head> <title>浮动</title> <style> div{ m

解决浮动导致父元素高度坍塌的几种方法

_andylala的博客

05-24

6711

一、文档流与浮动 1、’什么是文档流？ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;在html中，文档流也可以叫做标准流或普通流。元素的显示方式是自上而下，从左到右，其中，块级元素默认占据一行，行内或行内块级元素只占据内容部分的内容或自身的所占据的部分，并不会像块级元素一样霸道的占据一行，其实这也跟自然现象中的瀑布自上而下流动是一个道理^_^。 2、不安分的浮动 &amp;nbs

解决父元素塌陷的问题

whr

06-03

2576

父元素塌陷的定义：

解决父元素高度坍塌问题（浮动）

lixiuyuanNo的博客

08-13

697

1.给父元素一个固定的高度；（在父元素可以有固定高度的情况下） 2.给父元素添加浮动属性；（在父元素确实需要浮动的情况下） 3.BFC：给父元素添加{overflow:hidden/auto;}属性；（如果子元素需要定位，溢出部分会被隐藏） 4.清除浮动：(1) 直接在父元素后加伪类元素 .fu::after{ content:''; display:block; clear:both; } (2)由于页面中很多元素都需要使用清除浮动，为了提高代码...

做一个能适配「手机」的网站需要注意什么