CSS float详解

一、float

1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置

2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘

3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）

4.浮动的影响：

　　对附近的元素布局造成改变，使得布局混乱
　　浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征
　　因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度），下面用图来说明一下高度坍塌：

5.清除浮动与闭合浮动

　　　　先说说我个人的理解：我将解释一下我理解的闭合浮动与清除浮动

　　　　清除浮动：使用clear元素清除外面浮动，解决外面浮动对自己的影响

　　　　闭合浮动：当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最大化清除。举个例子:

　　　　ex:

<style type="text/css">
.box1{width: 200px;border: 2px solid #0f0;/*overflow: hidden;*/}.box1 .child-1{float: left;height: 100px;width: 100px;background: #fd0;}.box1 .child-2{float: left;height: 100px;width: 100px;background: #fba;}.box2{width: 200px;height: 150px;border: 2px solid #00f;/* clear: both; */}
</style>
<body><div class="box1"><div class="child-1">child-1</div><div class="child-2">child-2</div></div><div class="box2"></div>
</body>

图一：原始图

图二：child-1 和 child-2 进行浮动

图三:区分清除浮动与闭合浮动（个人理解：在外面解决问题，内部问题未解决）

清除浮动：对box2使用：clear：both

图四：闭合浮动（在内部解决问题：同时解决外部问题）

闭合浮动：对box1使用overflow：hidden（其中一种方式，后面还有更好的方式）

因此我更愿意称其为闭合浮动:其实也可以叫清除浮动，不过我就是觉得闭合浮动比较形象。

6.闭合浮动方法(常见的几个方法)：既然浮动带来这些不利的影响，我们就要想办法清除它。

其一：通过在浮动元素的末尾添加一个空元素，设置 clear：both属性；

缺点：成本太高，额外添加了一个元素，维护困难

<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div style="clear: both;"></div>
</div>
<div class="box2"></div>

其二：通过设置父元素 overflow 或者display：table 属性来闭合浮动，给box1添加overflow：hidden

其三（推荐）：使用伪元素：after,下面是代码，给box1添加上clearfloat这class即可

/*适配ie6*/
.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
height:0;
content:"";
clear:both;
visibility:hidden;
}

CSS float详解相关推荐

css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
css名词解析,小说CSS样式详解
CSS格式详解字体格式(font) 字体表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
CSS基本操作详解及截图演示
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
Css display 详解
Css display 详解 display :none display :block display :inline display :inline-block display :inherit d ...
前端之CSS篇(四)——CSS浮动详解
前言:页面布局要学习三大核心,盒子模型,浮动和定位 . 1.CSS浮动场景:整个网页的布局本节需要解决的问题: 为什么需要浮动浮动的排列特性 3种最常见的布局方式为什么需要清除浮动写出至少 ...
apache伪静态把css 排除掉_（02）CSS 选择器详解 | CSS
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 伪类选择器有哪些?2. ...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）
前言一按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用.但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的. 本人作为一名计 ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...

CSS float详解

一、float

CSS float详解相关推荐

最新文章

热门文章