1.浮动的元素不占用标准流的位置
2.浮动特性会让行内元素和块级元素都变成行内块元素，具有行内块的特性.
行内块的特点：宽高起作用，可以一行显示多个，margin,padding四面都有效
3.如果父盒子中有子盒子的话，一般的用法就是，让子盒子，要浮动都浮动，要不浮动都不浮动。
4.父盒子中的子元素，无论如何浮动，都不会超出父盒子。
5.浮动的元素跟上一个元素的位置有关系
2.设置图片在垂直方向的对齐方式
3.清除浮动的方式
1.给父元素设置一个高度 很少用
2.额外标签法： clear:both 给额外的标签添加 一个此属性，来清除左右的浮动，进而消除浮动对后面元素的影响
缺点是：白白的增加了一个额外的标签，会使页面标签变得冗余
3.overflow:hidden 给父元素添加overflow:hidden属性 几乎不用
缺点是：会造成额外溢出来的元素被隐藏掉
4.单伪元素清除法 用的很多，百度，淘宝，网易就经常的在使用
.clearfix::after { content:'.'; /*给生成的标签元素添加一个象征性的内容*/ display:block; /*将这个行内伪元素转换成块级伪元素*/ clear: both; /*给生成的伪元素添加清除浮动的功能*/ height: 0; /*将content内容中的.不在页面中显示*/ visibility: hidden; /*再加一层保险，将多余的部分隐藏掉，不要对页面布局造成影响*/ } .clearfix { *zoom: 1; } /* IE6、7 专有 */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动带来的影响</title> <style> * { margin:0; padding: 0; } .box { background-color:yellow; } .one, .two, .three { width: 200px; height: 200px; float: left; } .one { background-color: blue; } .two { background-color: purple; } .three { background-color: orangered; } .demo { width: 320px; height: 320px; background-color: cyan; } .demo div { width: 100px; height: 100px; background-color: red; } .demo::after { content:'123' } .clearfix::after { content:'.'; /*给生成的标签元素添加一个象征性的内容*/ display:block; /*将这个行内伪元素转换成块级伪元素*/ clear: both; /*给生成的伪元素添加清除浮动的功能*/ height: 0; /*将content内容中的.不在页面中显示*/ visibility: hidden; /*再加一层保险，将多余的部分隐藏掉，不要对页面布局造成影响*/ } .clearfix { *zoom: 1; } /* IE6、7 专有 */ </style> </head> <body> <div class="box clearfix"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="demo"> <div></div> </div> </body> </html>
5.双伪元素 用的也很多
.clearfix:after, .clearfix:before { content:''; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom: 1; /*兼容到IE6 7 浏览器*/ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动带来的影响</title> <style> * { margin:0; padding: 0; } .box { /* height: 200px; */ background-color:yellow; } .one, .two, .three { width: 200px; height: 200px; float: left; } .one { background-color: blue; /* float: left; */ } .two { background-color: purple; } .three { background-color: orangered; } .demo { width: 320px; height: 320px; background-color: cyan; } .demo div { width: 100px; height: 100px; background-color: red; } .clearfix:after, .clearfix:before { content:''; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom: 1; } </style> </head> <body> <div class="box clearfix"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="demo"> <div></div> </div> </body> </html>
块级元素
行内元素
行内块元素