css笔记 - 张鑫旭css课程笔记之 float 篇

https://www.imooc.com/t/197450
float

float的设计初衷/原本作用-是为了实现文字环绕效果
如，一个图片和一段文字垂直放置，给图片加上浮动，文字就环绕图片展示了。

浮动的包裹与破坏

包裹
收缩
坚挺
隔绝 - BFC

具有包裹的其他属性：(是不是可以生成块级上下文的其他属性？)

display: inline-block、table-cell...
position: absolute(近亲)、fixed、sticky
overflow： hidden、scroll

破坏 - 容器被破坏父元素高度塌陷

其他具有破坏属性的属性

display: none
position: absolute/fixed/sticky

总结
浮动是魔鬼
无宽度无图片无浮动

浮动让父元素高度塌陷不是bug而是标准！
浮动的破坏性只是单纯为了实现文字环绕效果而已；

清除浮动
其实是清除浮动带来的影响，浮动还在

基本方法：
1.在浮动元素的父元素底部插入clear:both
浮动元素和外部元素还是会有联系，例如发生margin重叠效果

浮动元素的父元素内部，如果有其他子元素有margin，还是会跑到父元素的外边，导致和父元素其他兄弟元素的margin重叠。

做法：
　　a. 用html， block水平元素底部插入一个空的div元素即可
　　b. 用css, after伪元素，
　　.clearfix:after{}
　　.clearfix{}

2.使父元素BFC(ie8+)或haslayout(ie6/7)
bfc形成一个封闭的结构，保证里边的元素不会对外部发生任何影响，例如浮动带来的影响，也就不会发生margin重叠,

因为bfc所形成的新块，包含内部元素的margin；
具体的区别对比，最清晰的看这个示例：https://www.imooc.com/code/2778

怎么形成BFC?
BFC、haslayout通常声明

float:left/right;
position: absolute/fixed;
overflow: hidden/scroll(ie7+)
display: inline-block、table-cell(ie8+)
width/height/*【zoom:1】/..(ie6/7)

以上，除了zoom:1以外，其他都不能通用，因为让所有元素都float不现实
但是zoom：1只在低版本ie，高版本也不兼容的。

通用清除浮动带来影响的写法：

1 .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;}
2 .clearfix:after{content:'';display:table;clear:both;} //大神推荐写法，与上边任选其一
3 .clearfix{*zoom:1;}

总结

clearfix只能用在包含浮动元素的父级元素上，滥用会有ie低版本的触发haslayout导致的诡异问题

浮动的特性
1.可以使元素block块状化（元素就像砖头一样一块一块的）
2.破坏性，造成的紧密排列特性（合并回车和空格等）
第一种：
<button></button> 
<button></button> 
<button></button> 
<p>button下边的一行字<p>
使用float后的感觉是：
<button></button><button></button><button></button>   //这就是对浮动的根本作用是实现文字环绕效果的最佳解释了

<p>button下边的一行字<p>

第二种：
<button></button>//看不见的回车
<button></button>//看不见的回车
<button></button>//看不见的回车
使用float后的感觉是：
<button></button><button></button><button></button>
<p>button下边的一行字<p>

具体见老师的demo，更直观https://www.imooc.com/code/2864

借助浮动实现流体布局

1.float之流体布局

css笔记 - 张鑫旭css课程笔记之 float 篇

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="author" content="郭菊锋 xing.org1^">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9   <title>浮动的应用</title>
10 </head>
11 
12 <body>
13   <div class="float overflow-float" style="overflow: hidden;border: 2px solid red;padding: 10px;">
14     <span style="color: red">overflow清楚浮动的原理是形成了一个BFC区域，不与外界干扰，可以看最后一个图片的margin-bottom也是包在红线里的</span>
15     <h3>浮动的根本作用-文字环绕效果</h3>
16     <img style="float:left;margin-right: 10px;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">
17     <span>张鑫旭css课程笔记 https://www.imooc.com/t/197450 1-float float的设计初衷/原本作用-是为了实现文字环绕效果 如，一个图片和一段文字垂直放置，给图片加上浮动，文字就环绕图片展示了。 浮动的包裹与破坏
18       包裹 收缩 坚挺 隔绝 - BFC 具有包裹的其他属性：(是不是可以生成块级上下文的其他人？) display: inline-block、table-cell... position: absolute(近亲)、fixed、sticky
19       overflow： hidden、scroll 破坏 容器被破坏 父元素高度塌陷 其他具有破坏属性的属性 display: none position: absolute/fixed/sticky 总结 浮动是魔鬼 无宽度 无图片
20       无浮动 浮动让父元素高度塌陷不是bug而是标准！ 浮动的破坏性只是单纯为了实现文字环绕效果而已； 清除浮动 其实是清除浮动带来的影响，浮动还在 基本方法： 1.在浮动元素的父元素底部插入clear:both 浮动元素和外部元素还是会有联系，例如发生margin重叠效果
21       -- 浮动元素的父元素内部，如果有其他子元素有margin，还是会跑到父元素的外边，导致和父元素其他兄弟元素的margin重叠。 做法： a. 用html， block水平元素底部插入一个空的div元素即可 b. 用css, after伪元素，
22       .clearfix:after{} .clearfix{} 2.使父元素BFC(ie8+)或haslayout(ie6/7) bfc形成一个封闭的结构，保证里边的元素不会对外部发生任何影响，例如浮动带来的影响，也就不会发生margin重叠,因为bfc所形成的新块，包含内部元素的margin；
23       具体的区别对比，最清晰的看这个示例：https://www.imooc.com/code/2778 怎么形成BFC? BFC、haslayout通常声明 . float:left/right; . position: absolute/fixed;
24       . overflow: hidden/scroll(ie7+) . display: inline-block、table-cell(ie8+) . width/height/*【zoom:1】/..(ie6/7) 以上，除了zoom:1以外，其他都不能通用，因为让所有元素都float不现实
25       但是zoom：1只在低版本ie，高版本也不兼容的。 通用清除浮动带来影响的写法： .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;}
26       .clearfix:after{content:'';display:table;clear:both;}//大神推荐写法 .clearfix{*zoom:1;} clearfix只能用在包含浮动元素的父级元素上，滥用会有ie低版本的触发haslayout导致的诡异问题
27       20180622 浮动的特性 1.可以使元素block块状化（元素就像砖头一样一块一块的） 2.破坏性，造成的紧密排列特性（合并回车和空格等） 第一种：
28     </span>
29     <img style="float:left;margin-right: 10px;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">
30     <img style="float:left;margin-bottom: 50px;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">
31   </div>
32   <div style="background-color: #f5f5f5;">
33     <span></span>
34     <h3>张大神的案例，为了说明clear清楚浮动后，子元素的margin会探出父元素</h3>
35     <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
36     <div style="clear:both; margin-bottom:100px;">clear:both;</div>
37   </div>
38   <div class="float clearfix" style="border: 2px solid red;padding: 10px;margin-top: 10px;">
39     <span></span>
40     <h3>一摸一样的实例，但是我给父元素加了个border，奇迹出现了！</h3>
41     <style>
42       /* .clearfix{
43         *zoom: 1;
44       }
45       .clearfix::after{
46         content: "";
47         display: table;
48         clear: both;
49       } */
50     </style>
51     <img style="float:left;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">
52     <div style="margin-bottom: 100px;clear:both;">fuyuansu</div>
53   </div>
54 
55 </body>
56 
57 </html>

浮动实现流体布局