浮动float及清浮动

最新推荐文章于 2024-09-02 00:24:58 发布

cyzfd_sunshine

最新推荐文章于 2024-09-02 00:24:58 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/cyzfd_sunshine/article/details/87183357

版权

浮动介绍及基本语法

1. float:left | right | none | inherit;

2.文档流：文档中可显示对象在排列时所占用的位置

（在没有通过样式去显示时，他们按照自己的特征去显示，即每个元素占用自己的位置，如块元素从上至下（独占一行），内联元素从左至右）

3.浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

4.清除浮动 clear:left | right | both | none | inherit; 元素的某个方向上不能有浮动元素。

clear:both; 在左右两侧均不允许浮动元素。

浮动的特性，clear，多种清浮动的方法

1.浮动的特征

块在一排显示
内联支持宽高
默认内容撑开宽度
脱离文档流
提升层级半层

2.清浮动的方法

加高
父级浮动
inline-block 清浮动方法；

问题：margin 左右auto失效

空标签清浮动

问题：IE6最小高度19px；（解决后IE6下还有2px偏差）

br清浮动

问题：不符合工作中：结构、样式、行为，三者分离的要求。

after伪类清浮动方法（现在主流方法）

.clear:after{content:'';display:block;clear:both;}

.clear{zoom:1;}

after伪类：元素内部末尾添加内容；

:after{content"添加的内容";} IE6，7下不兼容

zoom 缩放

a、触发 IE下 haslayout，使元素根据自身内容计算宽高。

b、FF 不支持；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.clearfix{
				*zoom:1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
			.box{
				border:1px solid red;
			}
			.item{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div class="item"></div>
		</div>
	</body>
</html>

overflow:hidden 清浮动方法；

问题：需要配合宽度或者 zoom 兼容IE6 IE7；

overflow: scroll | auto | hidden；

overflow:hidden;溢出隐藏（裁刀！）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				border: 1px solid black;
				overflow: scroll;
			}
			.item{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

overflow清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				border: 1px solid red;
				overflow: hidden;  
			}
			.item{
				width: 200px;
				height: 200px;
				background-color: black;
				float: left;
			}
		</style>

	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>

注意：右下角有个贴着的“返回顶部...”，且放在和overflow同一个父级，则就看不见了。