清除浮动的方法

清除浮动的方法

  • 1.overflow:hidden
  • 2.clear:both 在最后面加一个空元素
  • 3.利用伪元素 :after
  • 4.display:table
  • 5.父级一起浮动
  • 6.overflow:auto

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

清除浮动的方法_第1张图片

1.overflow:hidden

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;overflow:hidden;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

清除浮动的方法_第2张图片

2.clear:both 在最后面加一个空元素

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
	.clearx{ clear:both;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	    <div class="clearx"></div>
	</div>
</body>

3.利用伪元素 :after

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
	.clearfx::after{ content: '';display: block;clear: both;}
</style>
//
<body>
	<div class="box clearx">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

4.display:table

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;display:table;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

5.父级一起浮动

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;float:left;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

6.overflow:auto

你可能感兴趣的:(css)