CSS清除浮动（float）的三种方式

标题CSS清除浮动（float）的三种方式

为什么要清除浮动？
浮动的原理是让图片脱离文档流，直接浮在画面上。我们一般布局都是只设置宽度不设置高度，让内容来填充高度。但利用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局机会混乱。这时候就可以利用清除浮动来解决父元素高度塌陷的问题。
1.添加挡板元素

<style>.father{border: 1px solid red;width: 900px;}.son1,.son2{width: 300px;height: 300px;float: left;}.son1{border: 1px solid darkcyan;}.son2{border: 1px solid skyblue;}.baffle{clear: both;zoom: 1;}</style>
</head>
<body><div class="father"><div class="son1">内容1</div><div class="son2">内容2</div><div class="baffle">挡板元素</div></div>
</body>

添加baffle（挡板）之前

添加baffle（挡板）之后

2.给父元素添加overflow: hidden;
这总是最快最方便的清除方式，但overflow: hidden还有另一个效果，溢出隐藏，当你元素的高度或者宽度大于父级高度或者宽度的时候，溢出的部分将会被隐藏

原本图片大小

给父元素添加overflow：hidden之后

图片的大小被父元素的高度和宽度束缚，这种情况常见与绝对定位和相对定位
3.万能清除
有点繁琐，但效果极好，不会溢出隐藏，且添加方式和第一种相似。

.father::after{content: "";height: 0;display: block;clear: both;zoom: 1;}

第一种方法比较一般，第二种方法最常用，第三种方式是为了清除第二种方法的影响下来清除浮动

8说了，就是细节。

CSS清除浮动（float）的三种方式相关推荐

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样式表引入的三种方式，及优先级顺序
CSS样式表引入的三种方式,及优先级顺序 CSS可以通过三种方式引入样式表,三种方式分别是行内样式表,内部样式表和外部样式表. 行内样式表通过给标签设定style属性 <body>< ...
CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
Mysql清除表数据的三种方式
Mysql 删除数据表的三种方式详解用法: 1.当你不再需要该表时, 用 drop; 2.当你仍要保留该表,但要删除所有记录时, 用 truncate; 3.当你要删除部分记录或者有可能会后悔的话, ...
css清除浮动float
一.浮动产生原因一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性, 导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对 ...
清除浮动的常用几种方式
(1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单. ...
亲爱的老狼-清除浮动float的5种方法
1>清除子级元素的浮动时,使用clear:left.right.both clear:both写成空盒子.放在css内末尾 2>清除父级元素的浮动时,使用overflow:hidden.a ...
css 清除浮动float 嗒嘀嗒滴 ----20181120
手动给父元素添加高度通过clear清除内部和外部浮动给父元素添加overfloat属性并结合zoom:1使用给父元素添加浮动常用方法: ①```给兄弟元素添加clear属性:添加一个class ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...

CSS清除浮动（float）的三种方式

标题CSS清除浮动（float）的三种方式

CSS清除浮动（float）的三种方式相关推荐

最新文章

热门文章