Java网页搭建--float浮动

最新推荐文章于 2023-11-10 16:33:05 发布

原创最新推荐文章于 2023-11-10 16:33:05 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

从网页搭建入门java web 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了CSS定位机制中的浮动概念，包括普通流、浮动元素的特征、浮动的基本语法，以及如何处理使用浮动后出现的问题，如清除浮动的方法，并通过案例进行了演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS定位机制：
三种：

普通流：

宽元素特征：

行内元素特征：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>block、inline</title>
	<style type="text/css">
		div{
			width:300px;   
			height:200px;
			background:blue;
		}
		span{
			width:300px;
			height:200px;
			background:red;
		}
	</style>
</head>
<body>
	<div>这个是块级元素1</div>
	<div>这个是块级元素2</div>
	<span>这个是行内元素1</span>
	<span>这个是行内元素2</span>
</body>
</html>

输出结果：

CSS Float的基础知识：

CSS Float的基本语法：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        body{
            font-family: '微软雅黑';
        }
        .per{
            width: 400px;
            height: 200px;
            border: 1px solid #CCC;


        }
        .red{
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
            /*此处写代码*/
            float:left;
        }
    </style>
</head>
<body>
<div class="per">
    <div class="red"></div>慕课网是垂直的互联网IT技能免费学习网站。
    以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。
    在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
    慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基...
</div>
</body>
</html>

输出结果：

使用浮动产生的问题：

清除浮动：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float</title>
	<style type="text/css">
	.container{
		width:500px;
		height:500px;
		border:2px solid #333;
	}
	.box01{
		width:100px;
		height:100px;
		background:blue;
		color:#fff;
		float: right;
		clear:both;
	}
	.box02{
		width:100px;
		height:100px;
		background:red;
		color:#fff;
		float: right;
		clear:both;
	}
	.box03{
		width:100px;
		height:100px;
		background:orange;
		color:#fff;
		float: right;
		clear:both;
	}

	</style>
</head>
<body>
	<div class="container">
		<div class="box01">11111</div>
		<div class="box02">22222</div>
		<div class="box03">33333</div>
	</div>

</body>
</html>

输出结果：