前端Html5/Css3—div浮动(附有解决边框塌陷问题，代码+案例)_html塌陷如何通过设置浮动解决-CSDN博客

本文链接：https://blog.csdn.net/weixin_54555405/article/details/141672208

文章目录

第七章浮动（解决边框塌陷问题）

第七章浮动（解决边框塌陷问题）

7.1 display

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

7.2 float属性/浮动

可以设置块级元素排列在一行

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

div{
  float:left;/*左浮动*/
  float:right;/*右浮动*/
}

7.3 解决边框塌陷问题

给父容器后面添加空的div,并设置为

<div style="clear: both;"></div>

设置父容器高度：比如hight:400px;
给父容器添加overflow: hidden;

给父容器添加伪类:after,并设置为

fatherdiv:after{
				display: block;
				content: "";
				clear: both;
				
			}

解决塌陷案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.maxdiv{
				width: 900px;
        /*1.解决塌陷的容器*/
				/* height: 300px; */
				background-color: pink;
				box-sizing: border-box;
				margin: 0 auto;
        /*2.解决塌陷的容器*/
				overflow: hidden;
			}
      /*3.解决塌陷的容器*/
			/* .maxdiv:after{
				display: block;
				content: "";
				clear: both;
				
			} */
			.outdiv{
				width: 300px;
				border: 5px black solid;
				float: left;
				height: 100%;
				box-sizing: border-box;
				
			}
			.imgdiv{
				background-color: blue;
				float: left;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.imgdiv>img{
				width: 100%;
				height: 100%;
			}
			.bottdiv{
				background-color: bisque;
				width: 1500px;
				height: 300px;
        /*4.解决塌陷的容器*/
				/* clear: both; */
			}
			
		</style>
	</head>
	<body>
<div class="maxdiv">
			
		<div class="outdiv">
				<div class="imgdiv">
          <img src="img/12.jpg" alt="" />
      	</div>
		</div>
			
			<div class="outdiv">
				<div class="imgdiv">
          <img src="img/12.jpg" alt="" />
      	</div>
		 </div>
			
			<div class="outdiv">
				<div class="imgdiv">
          <img src="img/12.jpg" alt="" />
      	</div>
		 </div>
			
		</div>
		
		<!-- //解决塌陷的容器 -->
		<div class="bottdiv"></div>
</body>
</html>