CSS——浮动（float）

一、float的概念：通过浮动可以使一个元素向其`父元素`的左侧或右侧移动

二、float 可选值：

-float:none：默认值，无浮动效果
-float:left：向左浮动
-float:right：向右浮动

三、浮动的特点

① 当元素设置float之后，便相当于从文档流中脱离出来（什么是文档流——传送门），也就是说元素在文档流中的特点都将不存在。具体指的是：

水平方向的等式不需要强制相等
块元素：不再独占一行、默认高度和宽度被内容撑开
行内元素：同块元素
也就是不再区分块元素和行内元素，天下大同了）

② 浮动元素不会从父元素中移出
③ 两个或多个元素都设置float，即可并排横向排列，且浮动元素不会超过它前边的其他的浮动元素

<style>.box1{height:100px;width:100px;background-color:#bfa;float:left;}.box2{height:100px;width:100px;background-color:orange;float:left;}.box3{height:100px;width:100px;background-color:yellow;float:left;}</style><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>

④ 浮动元素不会超过它上边浮动的兄弟元素，最多和他一样高
比如，把box1和box2宽度改成200px，box3改成向右浮动

当我们浏览器的宽度逐渐变窄到一行放不下三个元素时，第三个元素就会显示到下一行：
将浏览器继续变窄，第二个元素也会显示到下一行，这是有个问题，下图中红色方框圈出的地方，虽然无法容纳box2，但box3全完可以放得下，但是box3并没有上移，而是和box2排列在同一行，这就是浮动的这个特点：浮动元素不会超过它上边浮动的兄弟元素，最多和他一样高：

⑤ 浮动不会盖住文字，文字会环绕在浮动元素的周围，也就是设置文字环绕图片效果：

CSS——浮动（float）相关推荐

css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
关于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 会更简单.让我们看下使用这 ...
经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
杨元：CSS浮动(float,clear)通俗讲解
zt http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
CSS浮动Float
本人也是刚接触css所以有说的不对的和需要补充的,各位大神指点出来帮助本人提升,感谢!! 块级元素: 在Html布局中,基本都是利用属性的嵌套来完成页面的板块,然后进行css的美化布局,但首要了解的还 ...
(转) 杨元：CSS浮动(float,clear)通俗讲解
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差, ...
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
CSS浮动(float)属性学习经验分享
作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的"门道". 下面就通过一些例子来归纳总结一 ...

CSS——浮动（float）

一、float的概念：通过浮动可以使一个元素向其`父元素`的左侧或右侧移动

二、float 可选值：

三、浮动的特点

CSS——浮动（float）相关推荐

最新文章

热门文章

CSS——浮动（float）

一、float的概念：通过浮动可以使一个元素向其父元素的左侧或右侧移动

二、float 可选值：

三、浮动的特点

CSS——浮动（float）相关推荐

最新文章

热门文章

一、float的概念：通过浮动可以使一个元素向其`父元素`的左侧或右侧移动