浮动是css里面布局用的最多的属性。
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。
浮动的性质：脱标、贴边、字围、收缩。
浮动的元素脱标
Document
两个元素并排了, 并且两个元素都能够设置宽度、高度了。
Document
我是span
我是span
我是span
我是span
我是span
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。
浮动的元素互相贴靠
Document
1
2
3
浮动的元素有"字围"效果
Document
123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
div挡住了p, 但是p中的文字不会被挡住, 形成"字围"效果。 如果将p标记换成div, 则不会有"字围"效果。
详细案例见：CSS|实例|图文混排
收缩：一个浮动的元素, 如果没有设置width, 那么将自动收缩为文字的宽度(这点非常像行内元素)。
Document
我是文字
浮动的清除
实验：现在有两个div, div身上没有任何属性。每个div中都有li, 这些li都是浮动的。
Document
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
我们本以为这些li, 会分为两排, 但是, 第二组中的第1个li, 去贴靠第一组中的最后一个li了。
第二个div中的li, 去贴第一个div中最后一个li的边了。
原因就是因为div没有高度, 不能给自己浮动的孩子们, 一个容器。
清除浮动方法1：给浮动的元素的祖先元素加高度。缺陷: 只限于父元素高度确定的情况下。
如果一个元素要浮动, 那么它的祖先元素一定要有高度。高度的盒子, 才能关住浮动。
解决方法:
Document
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
清除浮动方法2：clear:both;
网页制作中, 高度height很少出现。为什么? 因为能被内容撑高! 那也就是说, 刚才我们讲解的方法1, 工作中用的很少。
脑弄大开：能不能不写height, 也把浮动清除了呢? 也让浮动之间, 互不影响呢?
clear:both;
clear就是清除, both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
这种方法有一个非常大的、致命的问题, margin失效了。
Document
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
清除浮动方法3：隔墙法
Document
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
墙!
这个墙, 隔开了两部分浮动, 两部分浮动, 互不影响。
近些年, 有演化出了"内墙法"：
Document
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
内墙法本质-给没有高的父亲撑出高
因为一个父元素不可能被浮动的子元素撑出高度, 解决的方法：内墙法
Document
清除浮动方法4：overflow:hidden;
overflow就是"溢出"的意思, hidden就是"隐藏"的意思。
Document
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
本意就是清除溢出到盒子外面的文字。但是, 前端开发工程师又发现了, 能做偏方。
一个父亲不能被自己浮动的儿子，撑出高度。但是, 只要给父亲加上overflow:hidden; 那么, 父亲就能被儿子撑出高了。这是一个偏方。
div{
width: 400px;
border: 10px solid black;
overflow: hidden;
}
Document
浮动清除方法5: 利用伪元素清除浮动
Document
- 肯定放东西
- 肯定放东西
- 肯定放东西