CSS文本样式与浮动
CSS文本样式与浮动浮动[如果你有二个元素需要在一行显示 ，可以使用浮动，做网页布局]1 样式float:left(左边)/right(右边)2 特点1 脱离文档流2 可以设置宽度与高度3 可以设内外边框3 影响1 图文[行内块 行]环线[半脱离文档流]2 浮动塌陷1 父元素没有设置高度2 子元素都是浮动元素 无法撑开父元素高度如何解决：1 给父元素设置一个样式 overflow:hidden2 clear:left[左边的]/ right[右边]/both[全部]
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!-- 编码格式--><meta charset="UTF-8">
<!-- 文档标题--><title>Title</title>
<!-- 内部样式--><style>div{/*高度*/height: 200px;/*宽度*/width: 200px;/*背景颜色*/background-color: red;/*字体颜色 */color: darkblue;/*左浮动*/float: left;}
</style>
</head>
<!--在浏览器显示-->
<body><div id="x1"></div>
<!-- 这里的style是用的标签的形式--><div id="x2" style="background-color: black;float: right"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!-- 编码格式--><meta charset="UTF-8">
<!-- 文档标题--><title>Title</title>
<!-- 内部样式--><style>div{/*宽度*/width: 200px;/*高度*/height: 200px;}#x1{/*背景颜色 */background-color: red;/*左浮动*/float:left;/*宽度*/width: 300px;}#x2{/*背景颜色 */background-color: black;/*右浮动*//*float: right;*/}
</style>
</head>
<!--在浏览器显示 -->
<body><div id="x1"></div><div id="x2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!-- 编码格式--><meta charset="UTF-8">
<!-- 文档标题--><title>Title</title>
<!-- 内部样式--><style>#x1{/*宽度*/width: 1358px;/*高度*/height: 360px;/*背景颜色、*//*background-color: black;*/margin: 100px auto;}#x2{/*宽度*/width: 860px;/*高度*/height: 360px;/*背景颜色 */background-color: blue;/*左浮动*/float: left;}#x3{/*宽度*/width: 300px;/*高度*/height: 360px;/*背景颜色 */background-color: lawngreen;/*右浮动*/float: right;}#x4{/*宽度*/width: 100px;/*高度*/height: 100px;/*背景颜色 */background-color: pink;display: inline-block;}</style>
</head>
<!--在浏览器显示 -->
<body>
<!-- 容器--><div id="x1"><div id="x2"></div>
<div id="x3"></div>
<div id="x4"></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!-- 编码格式--><meta charset="UTF-8">
<!-- 文档标题--><title>明日方舟</title><style>body{/*背景颜色 */background-color: black;}#x1{/*宽度*/width: 100%;/*高度*/height: 120px;/*背景颜色 */background-color: black;
}#x4{/*宽度*/width: 90px;}#x2{/*左浮动*/float: left;}#x3{/*右浮动*/float: right;}p{/*字体颜色*/color: pink;}ul{/*清除小黑点*/list-style: none;}li{float: right;}</style>
</head>
<!--在浏览器显示 -->
<body><div id="x1"><div id="x2">
<!-- 图片显示--><img src="./素材包/img.webp" alt="" id="x4"></div><div id="x3">
<!-- 无序列表--><ul>
<!-- 有序列表--><li><p>x1</p><p>y1</p></li><li><p>x2</p><p>y2</p></li><li><p>x3</p><p>y3</p></li><li><p>x4</p><p>y4</p></li><li><p>x5</p><p>y5</p></li><li><p>x6</p><p>y6</p></li></ul></div></div>
</body>
</html>
