css清除浮动的集中方法

一：浮动产生的副作用

　　1.父元素的背景不能显示

　　2.父元素的边框不能撑开

　　3.padding和margin失效

二：清除浮动的方法

　　1.给父元素设置高度：这样可以清除浮动，但是子元素内容高度不固定，这种方法就不合适

<div class="outer"><div class="inner1"></div><div class="inner2"></div>
</div>

　　css样式：

.outer{width:400px;height:400px;  background-color:#e4393c;border:1px solid #ccc;
}
.inner1{width:100px;height:100px;float:left:
}
.inner2{width:100px;height:100px;float:left:
}

　　2.使用clear:both;可以实现清除浮动，在最后一个子元素上加上clear:both;

<div class="outer"><div class="inner1"></div><div class="inner2"></div><div class="inner3"></div>
</div>

.outer{width:400px;height:400px;  background-color:#e4393c;border:1px solid #ccc;
}
.inner1{width:100px;height:100px;float:left:
}
.inner2{width:100px;height:100px;float:left:
}
.inner3{clear:both;
}

　　3.给父元素添加overflow:hidden/auto;可以清除浮动

.outer{overflow:hidden;
}

　　4. :after的方法，最好的方法

<div class="outer"><div class="inner1"></div><div class="inner2"></div>
</div>

/*清除浮动*/.clearfix{display:inline-table;display:block;zoom:1;}.clearfix:after{clear:both;content:'.';display:block;height:0;visibility:hidden;}.clearfix:after, .clear:before{display:table;content:'';line-height:0;}

　　在需要清除浮动的地方加上这个class就行

转载于:https://www.cnblogs.com/taiyanghua0522/p/5806579.html

css清除浮动的集中方法相关推荐

css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...
css清除浮动的处理方法
根据<精彩绝伦的css> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
css清除浮动的六种方法
css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现. 总结了一共六种方法其中有两种最为常用: 1.height属性给父元素设置固定高度当父元素下的子元素进行了浮动时, ...
css清除浮动4种方法
为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性. 而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动 ...
web前端，css清除浮动的常见方法
一.为什么要清除浮动当我们为盒子设置浮动样式的时候,这是盒子将会脱离标准流,这样原先布局的其他内容将会占据盒子的位置,这样就没法看见相关内容. 而在清除浮动之后,父级就会根据浮动的子盒子自动检测高度 ...
CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...

css清除浮动的集中方法

css清除浮动的集中方法相关推荐

最新文章

热门文章