弹性盒模型（1）------Flex布局对子元素影响

最新推荐文章于 2022-05-01 17:14:46 发布

骆小胖

最新推荐文章于 2022-05-01 17:14:46 发布

阅读量2.4k

点赞数 1

分类专栏：笔记随笔教学笔录 CSS 常见特效前端积累文章标签：笔记随笔教学笔录 CSS 常见特效前端积累

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819087

版权

前端积累同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

笔记随笔

75 篇文章 0 订阅

订阅专栏

教学笔录

73 篇文章 0 订阅

订阅专栏

【前言】

总结讲解下弹性盒模型布局相关知识点，为以后课件做备录。本文简单讲解下Flex布局对子元素影响

【主体】

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.main_area{
			width: 600px;
			height: auto;
			border: 1px solid red;
			margin: 100px auto;
			display: flex;
			display: -webkit-flex; /* Safari */
		}
		.main_area div{
			width: 200px;
			height: 300px;
		}
		.main_area div:nth-of-type(1){
			float: right;
			background: red;
		}
		.main_area div:nth-of-type(2){
			background: green;
		}
		.main_area div:nth-of-type(3){
			background: blue;
		}
	</style>
</head>
<body>
	<div class="main_area">
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

测试后将第一个div右浮，会发现无效（弹性盒子元素无法浮动）。