浮动

1.浮动是什么

是一种css的样式
div{ float:left;//right }

1.可以让元素脱离文档流取消在标准流中所占的位置
2.如果是left 靠近父元素的左边排列如果是right 靠近父元素的右边排列

2.为什么要用浮动呢

进行水平排列
常见的元素 --行内元素和块级元素
行内元素水平排列共同占一行但是不具有宽高属性
块级元素垂直排列单独占一行具有宽高属性
你会发现无法满足一行放两个有宽高的排列方式
浮动不同 —浮动规则

浮动会脱离文档 --父元素不会计算它的宽高
浮动的元素带有宽高例如span 浮动后可设置宽高
浮动的层级在普通文档流之上会产生遮盖效果
浮动会一行排列当一行放不下就会换行

3.怎么做

<div class="fa"><span>我是</span><span>我是</span>
</div>

给对应的元素添加浮动的样式

span{float:left
}

4.会怎样

实现并列的排布
在一行中可以左边一个元素可以设置大小右边一个元素可以设置大小
常见的应用 :圣杯布局双飞布局左右排列

5.浮动产生的问题

1.浮动会脱离文档 --父元素不会计算它的宽高

<div class="fa"><span class="a">我是</span><span class="b">我是</span>
</div>

情况一 a浮动 b 不浮动

当第一个span a浮动后  脱离文档流
父元素不再计算它的位置
第二个span 就会忽略它 成为fa的第一个元素
此时父元素fa的高度 就是b的高度

情况二 b浮动 a 不浮动
当第一个span a不浮动
将第二个span b浮动后脱离文档流从原地飘起层级提升
父元素不再计算它的位置
b后面存在的元素会取代它的位置向上移动替代它的位置
此时父元素fa的高度就是a的高度

情况三 b 浮动 a 浮动
当两个span 都浮动后那么fa的高度将会为零
也就是高度塌陷
如何解决
请看下回—更新中

css浮动float:left|right相关推荐

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:left|right

浮动

浮动