CSS文本样式与浮动
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>
原文地址：https://blog.csdn.net/2302_79986066/article/details/143491630
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！