清除浮动的方式

1.给设置浮动的盒子的父元素一个overflow:hidden属性,即可消除父元素中子元素浮动对页面的影响。

2.使用伪元素来清除浮动

.clearfix:after {

content:"";
height:0;
line-height:0;
dispaly:block;/设置为块级元素/
clear:both;  /清除浮动/
visibility:hidden; /将元素隐藏/

}

.clearfix{

  zoom:1;/为了兼容IE6/

}

3.使用双伪元素

.clearfix:before,.clearfix:after{

content:"";

display:block;

clear:both;

}

.clearfix {

zoom:1

}

时间: 2024-08-07 04:31:42

清除浮动的方式的相关文章

清除浮动的方式以及各自的优劣

为什么要清除浮动 浮动会使当前标签产生向上浮的效果,导致不同浏览器在计算父级元素高度,或者显示前后标签位置的时候产生意想不到的问题. 清除浮动的方法 为父元素定义height 设置父元素浮动,同时为其设置高度 在浮动元素的后面添加一个空的div标签,并为新添加的标签设置clear:both 在浮动元素的后面添加一个空的br标签,并为新添加的标签设置clear:both 为父元素设置overflow:hidden 为父元素设置overflow:auto 为父元素设置display:table 为父

清除浮动的几种方式

最近来了个小徒弟,总是被浮动的盒子整蒙圈了,作为小师父的我就给他梳理一下: 浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性.其具有以下特点: 浮动的元素会脱离标准流: 浮动后的元素会覆盖标准流的元素: 浮动规则:浮动找浮动,不浮动找不浮动: 浮动显示的位置与原本不浮动的位置是对应的: 浮动的元素会影响下面的元素: 浮动的元素会改变显示方式(行内块级元素): a) 不管元素是行内元素还是块级元素都会在同一行显示: b) 浮动后的元素可以设置宽高: 例:

为什么要清除浮动,有哪些方式

一个块级元素如果没有设置height,那么其高度就是由里面的子元素撑开,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析 清除浮动的方式: 1)在浮动元素下加子元素<div class="clear"></div>然后设置样式.clear{ height:0px;font-size:0;clear:both;}: 2)在浮动元素下面(与浮动

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父

html-css:关于浮动的方式

1.在 The standard flow中内容的高度可以support父元素的高度2.在 The standard flow中浮动的元素can not support父元素的高度 1.清除浮动的方式:给前面一个父元素设置高度notice:在企业开发中能不写就不写高度,这种方式用的很少 清除浮动的第二种方法: 添加clear属性none 默认取值(左浮动找左浮动,右浮动找右浮动)/left (不要找前面的左浮动元素)/right(不要找前面的右浮动元素)/both(不要找前面的左.右浮动元素)N

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

ss清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

引自:https://my.oschina.net/leipeng/blog/221125. 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="di

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

利用伪对象选择器E:after实现清除浮动效果

利用伪对象选择器E:after实现清除浮动效果:关于清除浮动已经是老生畅谈的问题,文章实在是太多了,几乎已经被谈烂了.这当然是因为浮动是不居中必须要用到的技巧,那么清除浮动自然也是必须的,但是本章节还是要啰嗦一下,再次介绍一下清除浮动的方法的一种,因为它会用到之前比较少见的伪对象选择器,希望能够引起大家的注意.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &