html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（浮动元素的清除属性 clear＜伪元素、标签的使用＞）1

本文主要是介绍html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（浮动元素的清除属性 clear＜伪元素、标签的使用＞）1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSS提供的四种排版模型：标准流排版、浮动排版、定位排版、flex排版

一个页面中：默认的排版方式就是普通文档流的方式进行排版（页面的内容按照标签的顺序从上到下从左到右排列）

浮动排版：通过修改元素的默认派饭方式达到排版效果

float属性--在前面的表格使用下划线使用过

属性值
none	默认值，元素不浮动，按照标准流排列元素
left	元素浮动在父元素的左侧
right	元素浮动在父元素的右侧
inherit	继承父元素的float属性

特点：

浮动可以让块级元素（占据父容器的一整行）在一行中显示

这是在普通文档流的形式下：块状元素默认占据一整行

float: left

使得每个小盒子可以在同一行显示

特点：

浮动的元素可以脱离文档流--及文字围绕图片进行摆放

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动排版</title><style type="text/css">/*类选择器*/.wrapper{width: 300px;}/*后代选择器*/.wrapper img{float: left;}</style></head>
<body><div class="wrapper"><img src="https://image.gushimi.org/file/0e190026d4d90159db75a743569d7016.jpg" alt="李清照"><p>1084年3月13日-约1155年），号易安居士，汉族，齐州济南人。宋代女词人，婉约词派代表，有千古第一才女之称。李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与...</p></div>
</body>
</html>

margin: 0 auto/*浏览器实现居中*/

margin: 10px;/*文字围绕图片摆放之间不要太紧密流出10像素的具体*/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动排版</title><style type="text/css">/*类选择器*/.wrapper{width: 350px;margin: 0 auto/*浏览器实现居中*/}/*后代选择器*/.wrapper img{float: right;/*文字围绕图片摆放*/margin: 10px;/*文字围绕图片摆放之间不要太紧密 流出10像素的具体*/}</style></head>
<body><div class="wrapper"><img src="https://image.gushimi.org/file/0e190026d4d90159db75a743569d7016.jpg" alt="李清照"><p>1084年3月13日-约1155年），号易安居士，汉族，齐州济南人。宋代女词人，婉约词派代表，有千古第一才女之称。李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与...</p></div>
</body>
</html>

特点：

父元素高度塌陷的问题

高度塌陷问题的发生

浮动元素的清除属性 clear

属性值
left	不允许左侧出现浮动元素
right	不允许右侧出现浮动元素
both	不允许左右两侧出现浮动元素
none	默认值，允许左、右侧出现浮动元素
inherit	继承父级clear属性的值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动排版</title><style type="text/css">/*类选择器*/.outer{width: 500px;border: 1px  #000 solid;/*方便观察 边框线打开*/}.box{width:100px;height: 50px;border: 1px #03CBDC solid;/*方便观察 边框线打开*/float:left;}.clear{clear:both;/*div4不允许左右两侧出现浮动元素 所以独占了一整行父盒子的大小由div4决定 */}</style></head>
<body><div class="outer"><div class="box">div1</div><div class="box">div2</div><div class="box">div3</div><div class="clear">div4</div></div>
</body>
</html>

使用单独的标签做清除浮动的操作----实际上这个标签没有实际的语义

所以由此可以想到伪元素

使用伪元素解决

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动排版</title><style type="text/css">/*类选择器*/.outer{width: 500px;border: 1px  #000 solid;/*方便观察 边框线打开*/}.box{width:100px;height: 50px;border: 1px #03CBDC solid;/*方便观察 边框线打开*/float:left;}.clear{clear:both;/*div4不允许左右两侧出现浮动元素 所以独占了一整行父盒子的大小由div4决定 */}/*在选择器选中元素之后添加样式 或者内容*/.outer:after{clear:both;content:"div4";display:block;}</style></head>
<body><div class="outer"><div class="box">div1</div><div class="box">div2</div><div class="box">div3</div></div>
</body>
</html>