css 清除浮动float 嗒嘀嗒滴 ----20181120

手动给父元素添加高度
通过clear清除内部和外部浮动
给父元素添加overfloat属性并结合zoom:1使用
给父元素添加浮动

　　　　常用方法：

　　　　　　①```给兄弟元素添加clear属性：添加一个class为clear：both，

　　　　　　②```添加伪类：.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；

　　　　　　　　　　　　　　　　　　content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。

　　　　　　　　　　　　　　　　　　display: block; <----加入的这个元素转换为块级元素。

　　　　　　　　　　　　　　　　　　clear: both; <----清除左右两边浮动。

　　　　　　　　　　　　　　　　　　 visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；

　　　　　　　　　　　　　　　　　　 height: 0; <----高度为0；

　　　　　　　　　　　　　　　　　　 font-size:0; <----字体大小为0；

　　　　　　　　　　　　　　　　　　　}

　　　　　　③'''给父元素添加after伪类

　　　　　　　　　　　　　　.clearfix::before,

　　　　　　　　　　　　　　.clearfix::after{

　　　　　　　　　　　　　　　　　　　　content: ".";display: block; height: 0;overflow: hidden;

　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　.clearfix:after{

　　　　　　　　　　　　　　　　　　　　　clear: both;

　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　.clearfix {

　　　　　　　　　　　　　　　　　　　　zoom: 1; /* IE < 8 */

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　④`````给外层div加.clearfix:after {visibility: hidden; 和display的区别前者隐藏行列还占据空间 display: block; 必须写 font-size: 0;

　　　　　　　　　　　　　　　　　　　　　　　　content: " "; 必须写

　　　　　　　　　　　　　　　　　　　　　　　　clear: both; 必须写

　　　　　　　　　　　　　　　　　　　　　　　　 height: 0; 必须写

　　　　　　　　　　　　　　　　　　　　　　　　}

转载于:https://www.cnblogs.com/520Girl/p/9991397.html

css 清除浮动float 嗒嘀嗒滴 ----20181120相关推荐

css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
HTML如何消除别的块的影响,CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？...
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: 1 2 3 分析CSS代码样式: .outer{border: 1px solid #ccc;background: ...
css清除浮动float
一.浮动产生原因一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性, 导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
CSS清除浮动清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示由于浮动产生,如果对父级设置了(CSS b ...
CSS清除浮动（float）的三种方式
标题CSS清除浮动(float)的三种方式为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
如何清除浮动(float)所带来的影响
清除浮动(float) 1.定义和用法在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...

css 清除浮动float 嗒嘀嗒滴 ----20181120

常用方法：

css 清除浮动float 嗒嘀嗒滴 ----20181120相关推荐

最新文章

热门文章