浮动元素造成的父级高度塌陷

问题:
	父级元素不给高度,子元素浮动,会造成父元素高度塌陷
			
解决办法:
	1: 给父元素添加高度 height:;
		缺点: 不灵活
		
	2: 给父级元素添加overfow:hidden;(触发了一个bfc区域)
		缺点: 定位出去的元素将会被隐藏
		
	3: 给浮动元素的 最后 面添加一个空标签(块级元素)
		空标签的样式:
			width: 0;
			height: 0;
			clear: left/right/both; 左/右/都干掉
		缺点: 代码冗余
		
    4: 万能清除法
		visibility:显示隐藏;
		hidden	隐藏
		visible	显示
		
		.clearFixed:after{
			content:"";
			display:block;
			width:0;
			height:0;
			overflow:hidden;
			visibility:hidden;
			clear:both;
		}
			
	注:visibility:hidden; 与 display:none;的区别	
		1: 都是隐藏
		2: 前者隐藏时占据文档流,后者隐藏时脱离文档流
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值