清除浮动的四种样式写法

/* 清除浮动1 */

/* 添加额外标签使用 */

.clear {

clear: both;

}

/* 清除浮动样式2 */

.clearfix {

overflow: auto;

/* overflow: hidden;同理 */

zoom: 1;

}

/* 清除浮动样式3 */

/* :after相当于额外空标签 */

.clearfix:after{

content:"";

height:0;

line-height:0;

display:block;

visibility:hidden;

clear:both;

}

.clearfix{

/* 为了兼容IE */

zoom:1;

}

/* 清除浮动样式4 */

/* 使用双伪元素清除浮动 */

.clearfix:before,.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix {

zoom: 1;

}

清除浮动的四种样式写法相关推荐

[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
div清除浮动的四种方式
div 清除浮动的四种方式清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
css清除浮动的四种方法(详细)
浮动带来的影响清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题看下面一段代码 <div class="fater"><div class ...
CSS清除浮动的四种常用方法及其优缺点
前言什么是CSS清除浮动? 在非IE浏览器下,当容器的高度为auto(没有设置),且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度 ...
HTML清除浮动的四种方式
在我们使用html搭建网页时,如果一个父元素中的某个子元素设置浮动后,就会造成父元素的高度塌陷,会导致页面结构混乱.这是因为在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
CSS清除浮动的几种常见方法
文章目录浮动优点缺点清除浮动一.额外标签法实例二.父级添加overflow属性实例三.使用:after 实例四.使用双伪元素实例五.手动设置父级高度实例注意浮动当元素浮 ...

清除浮动的四种样式写法

清除浮动的四种样式写法相关推荐

最新文章

热门文章