div 清除浮动的四种方式

清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题。
简单来说给父元素加一个高度也能解决这个问题，但是很多情况下不方便给父元素高度。所以，一般情况下，应该让子元素内容自动撑开父元素，不要写死父元素的高度。
clear 属性用于清除浮动，以下是清除浮动的几种常见方式。

1. 额外标签法

在浮动元素后面添加一个新的空 div，这个空 div 的样式添加 clear：both。

语法:

      .clear {clear: both;} <div class="child1"></div> // 浮动元素<div class="child2"></div> // 浮动元素<div class="clear"></div>

优点：代码简洁。
缺点：添加了无意义的标签，结构化较差。

2. 为父元素添加 overflow 属性

语法： 父元素选择器{ overflow：hidden | auto | scroll}
为父级元素添加 overflow 触发 BFC,BFC 可以清除浮动。
优点：内容简洁。
缺点：内容增多的时候容易造成不会自动换行，导致内容被隐藏掉，无法显示需要溢出的元素。

3. 使用 after 伪元素清除浮动

语法：

      .clearfix:after {display: block;content: '.';height: 0;visibility: hidden;clear: both}// ie6、ie7 浏览器的处理方式 .clearfix {*room: 1;}

优点：符合闭合浮动的思想，结构语义化正确
缺点：ie6，ie7 不支持

4. 使用 before 和 after 双伪元素清除浮动

语法：

  .clearfix:before,.clearfix:after {content: '';display: table;}.clearfix:after {clear: both;}

强烈推荐使用这种方式。

div清除浮动的四种方式相关推荐

清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
HTML清除浮动的四种方式
在我们使用html搭建网页时,如果一个父元素中的某个子元素设置浮动后,就会造成父元素的高度塌陷,会导致页面结构混乱.这是因为在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
css 清除浮动的几种方式
css 清除浮动的几种方式浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流. float布局会脱离文档流,对页面的布局造成影响,比如造成父级 ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
前端css 清除浮动的几种方式
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样.浮动的块框会漂浮在文档普通流的块框上. 清 ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...

div清除浮动的四种方式

div 清除浮动的四种方式

1. 额外标签法

2. 为父元素添加 overflow 属性

3. 使用 after 伪元素清除浮动

4. 使用 before 和 after 双伪元素清除浮动

div清除浮动的四种方式相关推荐

最新文章

热门文章