当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > css >内容正文

css

css中清除浮动的两种方式 -凯发ag旗舰厅登录网址下载

发布时间：2024/10/12 css 28 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了 css中清除浮动的两种方式小编觉得挺不错的,现在分享给大家,帮大家做个参考.

　　在css中，父元素中的子元素如果使用了float，会导致父元素塌陷，高度为0。

　　对于这种情况，常见的解决方式有两种。

一、增加新的div，应用clear:both属性

html:

1 <div class="father"> 2 <div class="div1">1div> 3 <div class="div2">2div> 4 <div class="div3">3div> 5 <div class="clear">div> 6 div>

css:

1 .clear { 2 clear:both; 3 height:0; 4 }

二、利用:after来清除浮动

原理：这种方法的原理是利用伪类:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其原理类似第一种方式，但区别在于这种方式是利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

首先需要给父元素添加一个.clear类

css如下

.clear:before, .clear:after {content: '';display: table; } .clear:after {clear: both; } .clear {*zoom: 1; //兼容ie6、ie7 }

转载于:https://www.cnblogs.com/tgxh/p/6135615.html

以上是凯发ag旗舰厅登录网址下载为你收集整理的css中清除浮动的两种方式的全部内容，希望文章能够帮你解决所遇到的问题。