关于css浮动

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_33991727

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/hiYoHoo/blog/410652

2019独角兽企业重金招聘Python工程师标准>>>

html：

<div class = "left">
		<div>
			<p>标题1</p>
		</div>
		<div>
			<p>标题4</p>
		</div>
	</div>
	<div class = "right">
		<div>
			<p>标题3</p>
		</div>
		<div>
			<p>标题6</p>
		</div>
	</div>
	<div class = "center">
		<div>
            <p>标题2</p>
		</div>
		<div>
            <p>标题5</p>
		</div>
	</div>

css：

div div {
            min-height: 300px;
			border: 1px solid blue;
			font-family: "Microsoft Yahei";
			margin-bottom: 5px;
		}
        div div:after {
			content: "HTML、CSS和JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。";
		}
        .left {
			width: 20%;
			float: left;
		}
        .right {
			width: 30%;
			float: right;
		}
		.center {
			margin-right: 31%; margin-left: 21%;
		}
		p {
			background-color: blue;
			border-color: blue;
			color: white;
			margin: 0; padding: 5px 0;
			text-align: center;
		}

实现效果：

如果html代码中<div class = "center">放在<div class = "right">之前，效果是这样的：

.center的外边距不影响其他浮动div的空间。但是浮动元素处于静态块元素（不包括absolute和fixed，这两者脱离了文档流，紧缩为内联元素）之后时，即使静态块元素是固定宽高且空间足够，浮动元素也会另起一行定位。

在处理这个问题的时候，注意到了几个小细节，也一并记下来：

使用负外边距对块元素进行强制位移。
内外边距使用百分比值是相对于父元素宽度进行计算的，这里的边距包括上下边距。
min/max-width/height常用于百分比布局。
浮动元素先确定大小，再确定位置。
clear属性仅对两侧浮动元素（无视非浮动元素）有效，然后反馈到具有该属性的元素从而产生影响。元素使用clear会使元素不与浮动元素并排显示，而是转移到下一行显示。特别需要注意的是，按照html顺序解析规则，前面的浮动元素即使clear后面也不会影响后面的浮动元素的正常浮动。
（5.7更新）要使子元素浮动后不会撑破父元素，可以使父元素一起浮动。看得越多理解越深之浮动有更好的解决方案

转载于:https://my.oschina.net/hiYoHoo/blog/410652