欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS-浮动及清除浮动

程序员文章站 2024-01-28 16:06:46
...

一、传统网页布局的三种方式(简单说就是盒子如何进行排序顺序):

  • 普通流(标准流)
  • 浮动
  • 定位

注意:实际开发中,一个页面基本都包含了这三种布局方式(移动端会有新的布局方式)

1.标准流

CSS-浮动及清除浮动

2.浮动

  • 为什么要浮动?

CSS-浮动及清除浮动

  • 什么是浮动?

CSS-浮动及清除浮动

  • 浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的。

  1. .浮动元素会脱离标准流(脱标)
  2. .浮动的元素会一行内显示并且元素顶部对齐
  3. .浮动的元素会具有行内块元素的特性

注意:

   如果行内元素有了浮动,则不需要转换块级元素\行内元素就可以直接给高度和宽度

CSS-浮动及清除浮动

CSS-浮动及清除浮动

CSS-浮动及清除浮动

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置,我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。符合网页布局的第一准则。

浮动布局注意点

CSS-浮动及清除浮动

 

二:清除浮动

为什么要清除浮动?

CSS-浮动及清除浮动

清除浮动的本质

CSS-浮动及清除浮动

清除浮动

CSS-浮动及清除浮动

清除浮动的方法

CSS-浮动及清除浮动

1...清除浮动-----额外标签法

CSS-浮动及清除浮动

CSS-浮动及清除浮动

2...父级添加overflow

CSS-浮动及清除浮动

CSS-浮动及清除浮动

3...清除浮动——:after伪元素法

CSS-浮动及清除浮动

CSS-浮动及清除浮动

4...清除浮动——双伪元素清除浮动

CSS-浮动及清除浮动

CSS-浮动及清除浮动

总结:

CSS-浮动及清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
		.box {
			width: 800px;
			border: 2px solid blue;
			margin: 0 auto;
			/*overflow: hidden;  父级添加overflow*/
		} 
		.one {
			width: 100px;
			height: 100px;
			background-color: red;
			float: left;
		}
		.two {
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
		.three {
			width: 200px;
			height: 100px;
			background-color: red;
			float: left;
		}
		.banner {
			height: 400px;
			background-color: gray;
		}
		/*额外标签法*/
		/*.clear {
			clear: both;
		}*/

		/*清除浮动——:after伪元素法;
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix { IE6、7专有
			*zoom: 1;
		}*/

		.clearfix:before,.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
	</style>
</head>
<body>
	<div class="box clearfix">  <!-- 清除浮动----:双伪元素清除浮动; -->
		<div class="one">1</div>
		<div class="two">2</div>
		<div class="three">3</div>
		<!-- <div class="clear"></div>  额外标签法 -->
	</div>
	<div class="banner"></div>
</body>
</html>

 

 

相关标签: # CSS