- A+
所属分类：Web前端
文档流与浮动空间丢失：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <link rel="stylesheet" href="style.css"> <style> *{ margin:0; padding:0; } div{ width:300px; height:300px; } div:nth-of-type(1){ border:1px solid red; /* 前面的浮动，后面的不浮动，则后面的会顶上来 */ /* float:left; */ } div:nth-of-type(2){ background:lightblue; /* 前面的浮动，后面的也浮动，则两个元素并排 */ /* 前面的不浮动，后面的浮动，则后面的不受前面的影响 */ float:left; } </style> </head> <body> <div></div> <div></div> </body> </html>
行级元素浮动后转为块元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <link rel="stylesheet" href="style.css"> <style> *{ margin:0; padding:0; } div{ width:40%; border:1px solid black; padding:10px; height:400px; } span{ width:300px; height:300px; border:1px solid red; /* span浮动后转为块元素，此时设置的宽高才会生效 但不建议这么做，因为不符合语义 */ float:left; } span:nth-of-type(1){ float:right; } </style> </head> <body> <div> <span>span</span> <span>span</span> </div> </body> </html>
清除浮动对元素的影响：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <link rel="stylesheet" href="style.css"> <style> *{ margin:0; padding:0; } div{ width:100px; height:100px; } div:nth-of-type(1){ border:3px solid red; float:left; } div:nth-of-type(2){ border:3px solid orange; float:right; } div:nth-of-type(3){ border:3px solid green; /* 清除它前面的元素左浮动和右浮动带来的影响 */ clear:both; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
使用clearfix清除浮动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <link rel="stylesheet" href="style.css"> <style> *{ margin:0; padding:0; } main{ width:100%; border:1px solid pink; } div{ width:100px; height:100px; float:left; } div:nth-of-type(1){ border:3px solid red; float:left; } div:nth-of-type(2){ border:3px solid orange; } div:nth-of-type(3){ border:3px solid green; } .clearfix{ clear:both; } </style> </head> <body> <main> <div></div> <div></div> <div></div> <article class="clearfix"></article> </main> </body> </html>
通过after伪元素清除浮动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <link rel="stylesheet" href="style.css"> <style> *{ margin:0; padding:0; } main{ width:100%; border:1px solid pink; } main::after{ content:''; display:block; clear:both; } div{ width:100px; height:100px; float:left; } div:nth-of-type(1){ border:3px solid red; float:left; } div:nth-of-type(2){ border:3px solid orange; } div:nth-of-type(3){ border:3px solid green; } </style> </head> <body> <main> <div></div> <div></div> <div></div> </main> </body> </html>
overflow触发BFC清除浮动：
关于什么是BFC机制，这篇文章写的很好：https://segmentfault.com/a/1190000012988829
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <link rel="stylesheet" href="style.css"> <style> *{ margin:0; padding:0; } main{ width:100%; border:1px solid pink; /* 只要是overflow都能触发BFC机制 */ overflow:hidden; overflow:auto; overflow:scroll; } div{ width:100px; height:100px; float:left; } div:nth-of-type(1){ border:3px solid red; float:left; } div:nth-of-type(2){ border:3px solid orange; } div:nth-of-type(3){ border:3px solid green; } </style> </head> <body> <main> <div></div> <div></div> <div></div> </main> </body> </html>
