盒子的浮动和浮动的清除

未使用浮动前

盒子的浮动和浮动的清除_第1张图片

使用浮动后

float 属性使盒子脱离标准流,浮动的盒子在一行上显示。
盒子的浮动和浮动的清除_第2张图片

清除浮动后

盒子的浮动和浮动的清除_第3张图片

清除浮动的方法

  1. 给父盒子设置高度。
  2. 给父盒子使用伪元素清除浮动。
.clearfix:after{
			content: "";
			display: block;
			clear: both;
}
  1. 额外标签法,在浮动元素后面添加额外标签。
<div style="clear:both;"> div>

4.给父盒子添加overflow:hidden属性。

具体代码如下:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>floattitle>

	<style type="text/css">
	/* float 使盒子脱离标准流,浮动的盒子在一行上显示 */
	/* 行内元素浮动后转为行内块 */
		.div1 {
			background-color: pink;
			/* overflow: hidden; */
		}
		.red,.green,.yellow{
			width: 300px;
			height: 300px;
		}
		.red{
			background: red;
			float: left;
		}
		.green{
			background: green;
			float: left;
		}
		.yellow{
			background: yellow;
			float: right;
		}
		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		/* 让.clearfix兼容IE浏览器 */
		.clearfix {
			zoom: 1;
		}
	style>
head>
<body>
	<div class="div1">
	
		<div class="red">div>
		<div class="green">div>
		<div class="yellow">div>
		
	div>

body>
html>

你可能感兴趣的:(盒子的浮动和浮动的清除)