1-4-3代码实例（顺时针div环绕）

最新推荐文章于 2024-04-09 17:59:31 发布

Raquel1993

最新推荐文章于 2024-04-09 17:59:31 发布

阅读量489

点赞数

本文链接：https://blog.csdn.net/u014305060/article/details/52034652

版权

这篇博客介绍了在CSS布局中如何实现1-4-3元素的顺时针环绕效果。重点强调了父级元素属性对子元素的影响，特别是在清理浮动和设置高度方面。内容提醒读者在处理浮动元素时要注意清除浮动，并提供了解决父级元素无高度问题的方法。

摘要由CSDN通过智能技术生成

注意：父集有属性的赋值，子集在同一属性上新赋值无效，尤其注意.clear问题。可选择赋值在子集上。

浮动元素下新起一行要先清浮动。

父集无高度，清最下面div（需要全部包裹div，当然着眼于最下面）的浮动才能实现包裹。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
	.box{width: 400px;border:1px solid black;margin: 0px auto;}
	.big{width: 300px;height: 300px;background-color: purple;float: left;border: 0px; }
	.little div{background-color: yellow;}
	.rdiv div{width: 100px;height: 100px;float: left;}
	.clear{height:0px;font-size:0;clear:both;}
	.bdiv div{float: right;width: 100px;height: 100px;} 
	.test{float: right;}
	.clear1{height:0px;font-size:0;clear:both;} 
</style>
</head>
<body>
	&

最低0.47元/天解锁文章

Raquel1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-4-3代码实例（顺时针div环绕）

注意：父集有属性的赋值，子集在同一属性上新赋值无效，尤其注意.clear问题。可选择赋值在子集上。浮动元素下新起一行要先清浮动。父集无高度，清最下面div（需要全部包裹div，当然着眼于最下面）的浮动才能实现包裹。 Document .box{width: 400px;border:1px solid black;margin: 0px auto;} .b
复制链接

扫一扫