从问题找原因之CSS浮动清除

atinosun 发布于2019-08-29 16:34 / 2006人阅读

摘要：问题描述浮动元素导致的后面标签居中对齐失败，如下图问题原因浮动元素造成的影响，文本行内元素行内块元素会采取环绕的方式排列在浮动元素周围。若不设置浮动元素父元素的高度，则也会正常垂直居中，但浮动未清除。

问题描述

浮动元素导致的后面img标签居中对齐“失败”，如下图


    
        left-div
        right-div
    
    
        
        center text

问题原因

浮动元素造成的影响，文本、行内元素、行内块元素会采取环绕的方式排列在浮动元素周围。图中right-div的高度为51px，高于父级div的50px，故img标签居中是相对于(父级div宽度)-(right-div宽度)来计算的,所以偏离了正常水平居中的位置。若将p标签放到第img标签前面去，则不会产生这种问题。但最好的办法还是清除浮动。

清除浮动的方法 clear:both

使用

将上面的div插入content1和content2之间时，会造成content1和content2之间有一条缝隙，如果看不清，可以将right-div的高度调大

将上面的div插入content1尾部时，无变化，问题并未解决

使用伪元素，结果与上面方式2一致，未能解决问题

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
  clear: both;
}
.clearfix: { zoom:1 } //触发IE的haslayout.

BFC(Block formatting context)

设置content1样式overflow:hidden,完美解决问题

总结：总而言之，本次问题是由于浮动和设置了浮动元素父级元素高度共同作用的结果，不是仅仅清除浮动就能完全解决的。若不设置浮动元素父元素的高度，则img也会正常垂直居中，但浮动未清除。若只清除浮动，而不解决高度突出的问题，则img不能正常垂直居中。设置overflow:hidden刚好两点都做到了。

参考文章：清除浮动方法解析

GPU云服务器云服务器清除浮动浮动-前端-css 问题原因 html5浮动问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113838.html

理解CSS浮动与清除浮动

摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。本文主要探讨两个问题：为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动，并撑开父元素。起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...

刘东 2019-08-30 12:45 评论0 收藏0
css清除浮动的原理

摘要：最近学习发现了高度塌陷时候要清除浮动为了理解清楚浮动原理网上找了不少资料发现都写的不是很清楚而且都是一模一样的内容我在里分享一下我对清楚浮动原理的理解如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三如何清除浮动重点阅读一什么是浮动最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动...

番茄西红柿 2019-04-23 13:30 评论0 收藏0
前端笔记之CSS（下）浮动&BFC&定位&Hack

摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS：　　样式：　　布局：　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

番茄西红柿 2019-04-23 11:44 评论0 收藏0
CSS 定位浮动

摘要：概览为定位和浮动提供了一些属性，利用这些属性，可以建立各种布局，极大提高页面的表现力。定位属性规定元素的定位类型。绝对定位元素框从文档流完全删除，并相对于其包含块定位。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。概览 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立各种布局，极大提高HTML页面的表现力。定位的基本思想很简单，它允许你定义元素框相对于其正常...

Bamboy 2019-08-28 18:19 评论0 收藏0
css魔幻属性跟进篇

摘要：中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么，可以理解为内联元素没有盒模型，其高度由内容决定。白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一...

oogh 2019-08-30 14:16 评论0 收藏0