web开发平台，CSS块元素

最新推荐文章于 2023-03-23 12:30:00 发布

前端小薄饼

最新推荐文章于 2023-03-23 12:30:00 发布

阅读量46

点赞数

分类专栏：程序员文章标签：面试前端大前端

本文链接：https://blog.csdn.net/m0_60146993/article/details/119005559

版权

程序员专栏收录该内容

39 篇文章 0 订阅

订阅专栏

浮动元素脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px; 
height: 200px; 
border: 3px solid red;
float: left;
} 
.second { 
width: 200px;
height: 100px; 
border: 3px solid blue;
}
</style>
</head>

<body>
<div class="first">123</div>
<div class="second">456</div>
</body>
</html>
</pre>

外部距塌陷问题

1，当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。

<style>
.box1 {
width: 150px;
height: 100px;
margin-bottom: 20px;
background-color: rgb(201, 239, 98);
}
.box2 {
width: 100px;
height: 100px;
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

这时候两个盒子之间的垂直距离不是30px，而是20px。

解决方法：
尽量只给一个盒子添加margin值。

2.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

<style>
.box1 {
width: 150px;
height: 100px;
margin-top: 20px; 
/* border: 1px solid #000000; */
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
/* border: 1px solid #000000; */
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
</head>
 
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>

这时候两个盒子会发生合并，上外边距为20px。

解决办法：
①给父元素定义上边框
②给父元素定义上内边距
③给父元素添加 overflow：hidden；
④添加浮动
⑤添加绝对定位

3.如果存在一个空的块级元素，border、padding、inline content、height、min-height都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

可以理解成中间div宽度为0且上下边距融合，只取margin的最大值。

清除浮动的方式

1，使用额外标签法：
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

.clearfix{
       clear: both;
           }
<div class="clearfix"></div>

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

2，使用overflow属性来清除浮动：
先找到浮动盒子的父元素，再在父元素中添加一个属性，就是清除这个父元素中的子元素浮动对页面的影响。

overflow: hidden;

3，使用伪元素来清除浮动：

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

领取](https://gitee.com/vip204888/web-p7)，先到先得哦。**

[外链图片转存中…(img-riJ3kkxn-1626947778501)]
[外链图片转存中…(img-6Gl55Z2D-1626947778504)]

前端小薄饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web开发平台，CSS块元素

浮动元素脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;"><!DOCTYPE
复制链接

扫一扫