CSS-文档流-浮动-定位-HTML（二）

最新推荐文章于 2021-10-10 23:15:45 发布

湫少

最新推荐文章于 2021-10-10 23:15:45 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/qq_44513251/article/details/110847697

版权

本文介绍了CSS中的浮动及其应用场景，如创建图文环绕效果。浮动元素会脱离文档流，可能导致高度塌陷。文章通过实例解释了高度塌陷的原因，并探讨了如何通过清除浮动来解决这个问题。下篇将讨论定位技术。

摘要由CSDN通过智能技术生成

CSS-文档流-浮动-定位-HTML（二）

为什么需要浮动！

正所谓存在即使合理，浮动的存在自然有它所需要的用处，举个简单的例子，在我们写DOC文档的时候，有是由需要这样一个排版：一个图片，然后关于图片的介绍围绕在这个图片周围

比如：
在这里插入图片描述
或者比如：

在DOC文档里面，我们可以自由移动图片的位置，让这些文字浮动在图片的周围，这就是浮动所能实现的效果，当然不仅于此。

用专业的知识来说：浮动让原本的标签脱离了文档流（关于文档流的说明在一中有详细说明），并且脱离之后不再收文档流规则的约束，拥有块元素和行内元素的性质（可以设定高度和宽度，并在可以占据同一行），但是没有脱离文本流（脱离文本流的效果就是图片会盖着文字，具体可以看三，结合定位说明）

我们也可以用浮动做展示一组的图片的样式：
在这里插入图片描述
简单的写了一下，大家可以把蓝蓝的块看成图片哈嘻嘻！下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
    
	box-sizing:border-box;
	margin:0;
	padding:0;
}


/*清除浮动*/
.clearfloat:after{
    
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
	overflow:hidden;
	} 
.clearfloat{
    zoom:1} 

.parent{
    
	width:900px;
	height:800px;
	margin:auto;
	background:black;
	
}
.first{
    
	width:200px;
	height:200px;
	background:blue;
	float:left