CSS文本样式与浮动
CSS文本样式与浮动
浮动[如果你有二个元素需要在一行显示 ，可以使用浮动，做网页布局]
1 样式
float:left(左边)/right(右边)
2 特点
1 脱离文档流
2 可以设置宽度与高度
3 可以设内外边框
3 影响
1 图文[行内块 行]环线[半脱离文档流]
2 浮动塌陷
1 父元素没有设置高度
2 子元素都是浮动元素 无法撑开父元素高度
如何解决：
1 给父元素设置一个样式 overflow:hidden
2 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>
