CSS浮动Float——基础知识及兼容性问题

先说一下浮动的基本定义：浮动的框可以向左或向右移动，直到它的外边缘碰到父级边界或另一个浮动框的边框为止。由于浮动框不在文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。那么就要说一下文档流了，文档流是文档中可显示对象在排列时所占用的位置（可以认为各个元素原本默认的位置）。那我们在实际应用哪里会遇到这种问题呢。例如我们现在需要把几个块级元素放在一排，我们可以使用display：inline；但是这样我们无法改变高度，也可以使用display：inline-block；但是这样的话也存在换行符被解析，IE6、IE7不兼容的问题。现在可以使用Float来修饰，下面我们说一下不同的实现方法并对其进行说明：

要想使用Float，先来简单介绍一下

float浮动：
1、块在一排显示（使块元素在一排显示）
2、内联支持宽高（使内联元素支持设置高度）
3、默认内容撑开宽度（没有宽度自动撑开）前几个与inline-block效果相同
4、脱离文档流（浮动元素有可能会覆盖正常文档流中内容）
5、提升层级半层（浮动会挤开元素内的内容）

float:left | right | none | inherit;（左，右，没有浮动，与父类相同）

clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素（左，右，左右两边，无，继承父类）

如果两个元素一个带float一个不带，带浮动的会浮动半层，飘起来覆盖住另一个元素。但在使用过程中浮动也会带起意想不到的问题：如果父类包含一个浮动元素，浮动元素并不会撑开父类造成意想不到的问题，下面有几种解决办法：

1.加高（给父类加一个固定高度）
问题：扩展性不好（如果使高度，接下来如果内容更改，也必须同时更改父类的高）

2.父级浮动（给父类也加上浮动）
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法：
问题：margin左右自动失效；

4.空标签清浮动（定义一个空div，并清除左右浮动）
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

5.br清浮动（给浮动元素后加上br标签，并清除左右浮动）
问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类清浮动方法（现在主流方法）

.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}

after伪类：元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；

7.overflow:设置是否显示滚动条；
问题：需要配合宽度或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）

CSS浮动Float——基础知识及兼容性问题相关推荐

关于CSS浮动(float,clear)的通俗讲解（经验分享）
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
CSS浮动(float,clear)通俗讲解- 杨元- 博客园
学习CSS布局主页目录 inline-block 你可以创建很多网格来铺满浏览器.在过去很长的一段时间内使用 float 是一种选择,但是使用 inline-block 会更简单.让我们看下使用这 ...
【重识 HTML + CSS】网页基础知识、基本 HTML 标签
重识 HTML + CSS 网页的基础知识网页的显示过程缓存(cache)技术浏览器内核常用 HTML 元素 DOCTYPE 文档说明 html 元素:根元素 lang 属性 head 元素: ...
css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
杨元：CSS浮动(float,clear)通俗讲解
zt http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
(转) 杨元：CSS浮动(float,clear)通俗讲解
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差, ...
【前端】HTML+CSS 纯干货基础知识 + 面试题分享！
HTML+CSS 基础知识分享 img标签 img的alt和title属性区别 img和background-image a标签基本的文本标签 HTML5 音视频标签 HTML5列表标签 CSS选择 ...

CSS浮动Float——基础知识及兼容性问题

CSS浮动Float——基础知识及兼容性问题相关推荐

最新文章

热门文章