CSS学习10[重点]--浮动、浮动的效果以及内幕特性

CSS布局------浮动

前言
一、普通流
二、浮动
三、什么是浮动?
四、浮动的内幕特性
总结

前言

CSS盒子布具的三种机制：普通流（标准流）、定位、浮动。

一、普通流

普通流：网页内元素自上而下，从左到右排序。

二、浮动

浮动最开始的时候浮动是做文字环绕效果

html 复制代码

<html>
<head>
	<style>
	div {
		width: 200px;
		height: 100px;
		margin: 0 auto;
	}
	img {
		float: right;
	}
	</style>
</head>
<body>
	<div>
	123899hj9d
	<img src="#.png" width="12" height="10" alt="">
	</div>
</body>
</html>

后来发现可以用浮动布局盒子

三、什么是浮动?

普通流改到浮动

html 复制代码

<html>
<head>
	<style>
	div {
		width: 200px;
		height: 100px;
		background-color: pink;
		display: inline-block; /*转换为行内块元素，放到一行但是元素中间有空格*/
		float: left; /*左侧浮动 一行排列没有空隙*/
	}
	div:nth-child(2) {
		background-color: hotpink;
	}
	div:last-child {
		background-color: deeppink;
	}
	</style>
</head>
<body>
	<div>
	</div>
	<div>
	</div>
</body>
</html>

实现块级元素放在一行。用display转换为行内块元素，但是此时div之间的空格难以去掉。用float: left; 可以放在一行且没有空格。
元素的浮动指定了浮动属性的元素脱离标准流，移动到父元素中指定位置的过程。在CSS中用float属性来定义浮动，其基本语法格式：

float: left;

float: right;

float: none;

具体来说，浮动体现在脱离标准流，压在标准流上面。

html 复制代码

<html>
<head>
	<style>
	div:first-child {
		width: 200px;
		height: 100px;
		background-color: pink;
		float: left; /*加入这行，第一个盒子浮动到最上面，第二个盒子在底层从左上开始*/
	}
	div:last-child {
		width: 200px;
		height: 700px;
		background-color: blue;
	}
	/*如果两个盒子不加浮动，都是标准流，块级元素自上而下显示*/
	</style>
</head>
<body>
	<div>
	</div>
	<div>
	</div>
</body>
</html>

四、浮动的内幕特性

浮动脱离标准流，不占位置，压在标准流上面。浮动只有左右浮动。

使用的时候需要首先创造包含块 的概念，即浮动的元素找它最近的父级元素对齐，但不超出内边距。

html 复制代码

<html>
<head>
	<style>
	.father {
		width: 200px;
		height: 100px;
		background-color: pink;
		border: 10px solid purple;
		padding: 10px;
	}
	.son {
		width: 100px;
		height: 50px;
		background-color: blue;
		float: left; 
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
		</div>
	</div>
</body>
</html>

浮动元素的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

html 复制代码

<html>
<head>
	<style>
	section {
		width: 500px;
		height: 500px;
		background-color: pink;
		padding: 10px;
	}
	section div:first-child {
		width: 100px;
		height: 50px;
		background-color: blue;
		float: left; 
	}
	section div:last-child {
		width: 100px;
		height: 50px;
		background-color: purple;
		float: left; 
	}
	</style>
</head>
<body>
<section>
	<div>1</div>
	<div>2</div>
</section>
</body>
</html>

一个父盒子里面的子盒子，如果有一个子级有浮动，则其他子级都需要浮动。这样才能一行对齐显示。

元素添加浮动之后，具有行内块特性。元素的大小取决于定义的大小或者默认的内容大小。

html 复制代码

<html>
<head>
	<style>
	div {
		width: 500px;
		height: 500px;
		background-color: pink;
		float: left;  /*块级元素浮动之后 具有行内块特性*/
	}
	span {
		height: 100px;
		background-color: hotpink;
		float: left;  /*行内元素浮动之后 具有行内块特性*/
	}
	/*行内块特性 可以一行放多个 具有宽度和高度 盒子的大小由内容决定*/
	</style>
</head>
<body>
<section>
	<div>1</div>
	<div>2</div>
	<span>123</span>
	<span>123</span>
</section>
</body>
</html>

总结

浮动的目的为了让多个块级元素同一行显示。

float 浮漏特

浮：加了浮动的元素盒子是浮起来的，漂浮在标准流盒子上面

漏：加了浮动的盒子不占位置，原来的位置漏给了标准流盒子

特：特别注意，浮动的盒子需要和标准流的父类搭配使用，浮动可以使元素显示模型表现为行内块特性