CSS浮动特性

最新推荐文章于 2024-07-18 22:26:13 发布

端脑

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量188

点赞数

分类专栏：前端文章标签： CSS浮动特性

本文链接：https://blog.csdn.net/qq_43776742/article/details/97924433

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    .fa {
	    	 width: 500px;
	    	 height: 500px;
	    	 background-color: red;
	    	 border: 8px solid green;
	    	 padding: 20px;
	    	 margin: 10px;
	    }

	    .son {
	    	width: 100px;
	    	height: 100px;
	    	float: left;
	    	background-color: yellow;
	    }
	</style>
</head>
<body>
	<div class="fa">
		<div class="son"></div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 800px;
	   	  height: 500px;
	   	  background-color: #f40;
	   }

	   section div:first-child {
	   	     width: 200px;
	   	     height: 200px;
	   	     background-color: pink;
	   }
       /*
         熊大熊二都浮动 会顶对齐
         熊大不浮动 熊二浮动 熊二会下一行
       */
	   section div:last-child {
	   	     width: 249px;
	   	     height: 300px;
	   	     background-color: skyblue;
	   	     float: left;
	   }
	</style>
</head>
<body>
	<section>
		<div>熊大</div>
		<div>熊二</div>
	</section>
</body>
</html>

返回浮动目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动特性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fa { width: 500px; heigh...
复制链接

扫一扫

专栏目录