欢迎光临
我的个人博客网站

CSS 3 浮动布局,深度挖掘 -cyy

文档流与浮动空间丢失:

<!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>

CSS 3 浮动布局,深度挖掘  -cyy

 

 

清除浮动对元素的影响:

<!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>

CSS 3 浮动布局,深度挖掘  -cyy

 

 

使用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>

CSS 3 浮动布局,深度挖掘  -cyy

 

 

通过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>

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS 3 浮动布局,深度挖掘 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏