文档章节

关于布局中float的常见问题及解决办法

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 1087
阅读 17
收藏 0

在网页的布局中,我们经常要使用到float在进行元素的排版,那么随之而来的就是许多的问题,个人在开发过程中最常见的问题主要就是两种,一种是元素的浮动导致的布局混乱的问题,另一种是浮动后的盒子模型塌陷问题。

首先,要了解浮动就要先了解网页布局的原理。个人认为,网页在布局的过程中你可以把它看成是一个三维立体的空间,常规流元素因为重力的原因是在最底层依次按顺序往下排,而absolute和float元素这些不占用常规流的元素是脱离了重力漂浮在空中,但是它还是属于包含着它的盒子元素的。

那么了解原理后其实两个问题就可以一起解释了。

元素浮动后,他失去了重力,同时它在地上的位置也没有东西了,那么父级元素就会认为这里没有元素,而后面的元素也会挤过来,所以就会出现了我们在平时布局中碰到的两种问题了,父级被挤压,而后面的元素有一部分出现在了float元素本来的位置。既然我们已经知道了问题的所在,那么解决问题的方法其实也是很简单的,就是告诉父级元素和后面的元素,我虽然浮起来了,但是这块地还是我的,你们不能占用。

1、overflow方法,给父级元素一个overflow:hidden,设置高度值为auto,在没有明确高度限制的情况下,那么父级元素在隐藏超出他的元素是就会把浮动元素考虑在内,这样就防止了盒子模型的塌陷,同时,既然盒子不塌陷了,那么后续的元素就不能过来占用float原本的位置,顺便达成了清除浮动的目的,但是在实际的清除浮动过程中overflow这种方法会出现许多不可预知的问题,所以不建议使用overflow清除浮动。附上官方对于overflow解决盒子塌陷问题的解释:

因为overflow.hidden会触发BFC。BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成 一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝。独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,也就是说包含块会把浮动元素的高度也计算在内,所以不用清除浮动来撑起高度。

2、clearfix方法,这种方法在实际的使用过程中使用的比较广泛,网上的将解析也比较全,这种方法的原理我认为是使用clearfix后告诉后面的元素,前面的元素是浮动的,他们的位置是不能占用的。当然这种方法在使用过程中要注意clearfix添加的位置。clearfix是加在浮动元素的父级的class中,但是有时候会因为某些未知的原因失效,此时,只需要一个空标签(p、div这些都可以)设置class为clearfix并且放在浮动元素的父级元素和下一站元素的中间即可,这也算是第三种方法的一个改进吧。

3、clear:both方法,其实就是第二种方法中使用空标签的时候换一个class,而这个class中只需要一句话clear:both即可,不过在实际工作中我喜欢使用第二种里面的空标签方法多一点。

附:.clearfix:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 

.clearfix {*zoom:1;}//兼容ie

© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
CSS常见问题小技巧解决办法收集

一、常见问题 1、div标签未关闭  这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师,在未关闭的情况下记事本的不会提示你什么,如果是在DW中,未关闭DIV,开始的DIV会显示...

曾杨
2013/12/04
144
0
Web前端 个人笔记(未完待续...)

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 如:一个text文本框,选中之后(获得焦点)在ie下面是正常显示而在谷歌等浏览器上有一个虚线框,很明...

ForingY
2015/07/24
32
0
android兼容oppo手机刘海屏解决方案

引用自OPPO官方文档,这里缩减了一些内容,选取重要内容,包括oppo沉浸式的兼容。 转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80688802 本文出自:【奥特曼超人的博客】...

奥特曼超人
2018/06/14
0
0
Div+Css布局教程(-)CSS必备知识

目录: 1、Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解。 一、CSS布局属性 Width:设置对象的宽度(width:45px)。 Height:设置对象的高度(Height:45px;)。 Back...

城固如春
2016/11/12
45
0
css浏览器兼容问题(在IETester及其他浏览器中亲试过)

最近在研究一些关于浏览器兼容性问题的css问题,先归纳总结如下: (1)在一些现代浏览器(opera,chrome,谷歌,safari)中,如果给块级标签如div设置padding后会导致元素的height和width增...

sunshinewyf
2015/08/07
85
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部