在《css禅意花园》中所学到的

本文详细解释了CSS中浮动和定位的区别,包括它们如何影响页面布局、如何使元素居中及解决浮动引起的高度塌陷等问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

浮动和定位的区别:
对元素使用浮动,那么这个元素依然存在于文档流中,周围的元素也会感受到他的存在;
定位的话,能够实现精准定位于某一个位置上,定位的元素将不占据空间,就像消失了一样

被定位过的容器(无论是绝对还是相对)的左上角将作为该容器中定位元素的起始点


小Tips:
对于浮动元素,而且还会有水平margin的情况下,在IE浏览器中会出现外边距加倍的情况
解决办法:给那个浮动的元素加上display:inline;
让元素居中的方法:
1.使用margin:px auto的时候,必要条件是必须要给这个元素指明宽度;

2.使用绝对定位加上负外边距,绝对定位50%;给定位的元素加上margin:-元素宽度的一半(容易理解);


防止浮动导致的高度塌陷的方法之一:
空标签,在浮动元素的后面添加一个空标签,然后给这个空标签添加样式clear:both,来防止高度塌陷
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值