css之“清除浮动的3种方法”

<!--一、清除浮动的3种方法、-->
<!--1.给最后一个标签添加clear：both 不推荐使用(添加无意义标签，语义化差)-->
<div ><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><p class="clear-a">清除浮动的方法</p>
</div><!--2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐-内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素）-->
<div><ul class="clear-b"><li>1</li><li>2</li><li>3</li><li>4</li></ul><p>清除浮动的方法</p>
</div><!--3.使用after伪元素清除浮动（推荐使用）-->
<div><ul class="clear-c"><li>1</li><li>2</li><li>3</li><li>4</li></ul><p>清除浮动的方法</p>
</div>

/*a*/.clear-a{clear: both;}/*b*/.clear-b{overflow: hidden;}/*c*//*优点：符合闭合浮动思想，结构语义化正确*//*缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.*/.clear-c:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;height: 0;clear:both;visibility: hidden;}.clear-c{*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}

css之“清除浮动的3种方法”相关推荐

[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
CSS的浮动及清除浮动的5种方法
浮动是布局的时用到的一种技术,能够方便我们进行布局. 1.浮动的设置:css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 2.浮动的原理:使当前元素脱离普通流,相当于 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
【CSS】css清除浮动的几种方法
使用了float之后,父级盒子的高度变为0了.我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span,并设置浮动. 具体代码如下所示: 效果: 由上图可以 ...

css之“清除浮动的3种方法”

css之“清除浮动的3种方法”相关推荐

最新文章

热门文章