css 三种清除浮动(float)的方法

方法一:添加新的元素 、应用 clear:both

.clear{
   clear:both;
   height: 0;
   height: 0;
   overflow:hidden;
}

方法二:父级div定义 overflow: auto

.over-flow{
    overflow: auto;
    zoom: 1; //处理兼容性问题
}

方法三: 伪类  :after 方法  outer是父div的样式

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {
   clear:both;
   content:‘.‘;
   display:block;
   width: 0;
   height: 0;
   visibility:hidden;
}

原文地址:https://www.cnblogs.com/jessiespur/p/9523490.html

时间: 2024-10-15 04:47:42

css 三种清除浮动(float)的方法的相关文章

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

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

css 三(清除浮动专题)

1.  三个关于浮动的概念  不浮动float:none; 清除周围的浮动元素   float:both   这是清除浮动的本意 清除子元素浮动对父元素的影响  clearfix    很多人都理解成这个叫清除浮动.. 2. 什么是清除浮动 清除浮动不是把当前标签的浮动给清除了,如果这样,还加浮动做什么 其实清除浮动指的是清楚当前元素旁边的浮动元素,但是当前元素又不能影响别人,打不赢就跑,所以自己就跑到下面去了. 3. 为什么要清楚浮动 在布局的时候我们经常希望某些内容能够水平排布,水平排布后,

CSS3中三种清除浮动(float)的方法

方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 overflow: auto .over-flow{ overflow: auto; zoom: 1; //处理兼容性问题 } 方法三: 伪类  :after 方法  outer是父div的样式 .outer {zoom:1;} /*==for IE6/7 Maxthon2==*/ .outer :a

三种清除浮动

zoom详解:http://blog.csdn.net/u014516981/article/details/51824607 原文:http://www.cnblogs.com/zhongjiang/p/6440355.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t

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

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3">3</div> </div> 分析CSS代码样

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</

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 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显