css的浮动与清除理解

最新推荐文章于 2024-08-02 20:34:24 发布

Sallery

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/Sallery/article/details/107142878

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.浮动可以解决的问题：

（1）文字包围图片的问题。

（2）莫名其妙的间隔问题。

（3）向左向右排版对齐。

1.1文字包围图片的问题。

首先看没有加浮动的效果，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 500px;
			}
			img{
				float:left ;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<img src="./img/11.jpeg" >
			<span>菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！
			</span>
		</div>
	</body>
</html>

红色的那一块文字没有包围图片，越看越别扭，留着干啥。

原因：图片他是行级元素，他占一整行，所以文字在下面。

解决方法: 使用浮动可以解决这个问题，浮动让图片脱离正常的文档流，又不会让文字进入图片里面去。

只要给图片加一个css样式让他向左浮动，不是让span向左浮动哦，菜逼就包围了图片。

img{
	float:left ;
	}

1.2 莫名其妙的间隔问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 600px;
				height: 200px;
				background-color: skyblue;
			}
			.child{
				display: inline-block;
				width: 200px;
				height: 200px;
				background-color: aqua;
/* div是块级元素，将他变成行块，他就能跑到一行去了 */
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
	</body>
</html>

如图可见他并没有塞到一行去，中间有个缝缝。

原因：三行child类代码换行了产生了空格，在html中两条语句中不管有多少空格，只能渲染出来一个空格。

第一种解决方法：把语句写成如下代码可以解决问题，但是正常的代码不会这样写的。.

<div class="child"></div><div class="child"></div><div class="child"></div>

第二种解决方法：在child类的样式表中添加float：left；让他向左浮动。

.child{
				display: inline-block;
				 
				width: 200px;
				height: 200px;
				background-color: aqua;
				float: left;
			}

第三种解决办法：空格也是字体的一种，将font-size：0，也可以解决这个问题，但是不适用，里面有文字咋办。

.parent{
				width: 600px;
				height: 200px;
				background-color: skyblue;
				font-size: 0;
			}

1.3 排版问题

可以设置元素向左向右对齐

向右float：right；向左float：left

.child{
				display: inline-block;
				width: 200px;
				height: 200px;
				background-color: aqua;
				float: right;
			}

总结：浮动可以设置元素，脱离正常的文档流，向左或向右，靠近父级元素的边缘，或者是设置了浮动的其他元素的边缘靠拢。

2.浮动引发的高度塌的陷解决方法。

浮动引起的高度塌陷的问题，也是面试中常问的。

什么是高度塌陷？

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 900px;
				background-color: skyblue;
			}
			.child{
				display: inline-block;
				width: 200px;
				height: 200px;
				background-color: aqua;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
		<h1>菜逼！！！菜逼！！！菜逼！！！菜逼！！！</h1>
	</body>
</html>

按道理h1是块级元素应该在下面。

原因：父元素没有设置高度，子元素因为设置了浮动，脱离了文档流，父元素找不到子元素，所以子元素没有撑开父元素，h1就跑到上面来了。

这就是高度塌陷。

多说一句行内元素和块级元素的区别

行内元素：

与其他行内元素并排
不能设置宽高，默认的宽度就是文字的宽度
margin和padding上下无效

块级元素：

霸占一行，不能与其他任何元素并列。
能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

解决高度塌陷的方法：

1.设定父元素的高度

在知道父元素高度的情况下，给父元素设置高度。这里如果父元素给了100px，他还不会挤下去。

2. 在最后新增子元素，设置子元素css样式清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 900px;
				/* height: 200px; */
				background-color: skyblue;
			}
			.child{
				display: inline-block;
				width: 200px;
				height: 200px;
				background-color: aqua;
				float: left;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="clear"></div>
			
		</div>
		<h1>菜逼！！！菜逼！！！菜逼！！！菜逼！！！</h1>
	</body>
</html>

3.伪元素清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 900px;
				background-color: skyblue;
			}
			.child{
				display: inline-block;
				width: 200px;
				height: 200px;
				background-color: aqua;
				float: left;
			}
			.clear::after{
				clear: both;
				display: block;
				content: "";
			}
                  /* 方便其他地方需要，因为块级元素会使浏览器重新计算宽高等。*/

		</style>
	</head>
	<body>
		<div class="parent clear">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			
		</div>
		<h1>菜逼！！！菜逼！！！菜逼！！！菜逼！！！</h1>
	</body>
</html>

自己理解的伪类图

:befor 在元素内部的最前面创建一个假的子元素。

:after 在元素内部的最后面面创建一个假的子元素。

注意来，content必须要写，没有内容也要写成content:"";的样子。

清除浮动还有其他方法。这里只写比较常用的几个吧。

本人是个菜逼，理解有错误的地方，欢迎指正。记录下学习笔记。

Sallery

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css的浮动与清除理解

1.浮动可以解决的问题：（1）文字包围图片的问题。（2）莫名其妙的间隔问题。（3）向左向右排版对齐。1.1文字包围图片的问题。首先看没有加浮动的效果，<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width: 500p.
复制链接

扫一扫

专栏目录