使用float定位元素

最新推荐文章于 2021-08-27 00:13:36 发布

小贾爱编程

最新推荐文章于 2021-08-27 00:13:36 发布

阅读量801

点赞数 1

分类专栏： .NET 文章标签：使用float定位元素

本文链接：https://blog.csdn.net/qq_37589387/article/details/88732149

版权

本文探讨了CSS中元素定位的方法，重点在于float属性。float使得元素可以在父元素内靠边并自动换行，样式可设为left、right或none。注意到在使用float时，需指定div的width，height则可能需要auto和overflow:hidden来处理高度和浏览器兼容性问题。此外，解决不同浏览器margin-left差异的方法是使用display:inline。通过clear:both属性，可以清除浮动影响，实现子元素强制换行。

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

关于元素定位：元素定位方法通常包括：position、float和z-index等。

对float的说明：div默认换行，当设置了元素向左或向右浮动时，则会向其父元素的左侧和右侧靠紧，当一行显示不开的时候会自动换行。样式可选值：left、right、none

注意：当设置float属性时，所有div一定要设置width，而height有时可以不设置，height会随着内容的变化，自动调整（IE6），其他浏览器不会变化，该属性在网页布局是非常重要的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{width:500px;height:420px;border:20px solid teal;}
			#div2{width:200px;height:100px;border:1px solid blue;background-color:yellow;
			float:left;margin-left:40px;margin-top:20px;}
			#div3{width:200px;height:100px;border:1px solid blue;background-color: yellow;
			float:left;margin:20px 0px 0px 20px;}
            #div4{width:200px;height:100px;border:1px solid blue;background-color: yellow;
            float:left;