经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS 3 浮动布局，深度挖掘 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:29　　对本文有异议

文档流与浮动空间丢失：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.         }
  15.         
  16.         div{
  17.             width:300px;
  18.             height:300px;
  19.         }
  20.         div:nth-of-type(1){
  21.             border:1px solid red;
  22.             /* 前面的浮动，后面的不浮动，则后面的会顶上来 */
  23.             /* float:left; */
  24.         }
  25.         div:nth-of-type(2){
  26.             background:lightblue;
  27.             /* 前面的浮动，后面的也浮动，则两个元素并排 */
  28.             /* 前面的不浮动，后面的浮动，则后面的不受前面的影响 */
  29.             float:left;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div></div>
  35.     <div></div>
  36. </body>
  37. </html>

 

行级元素浮动后转为块元素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.         }
  15.         
  16.         div{
  17.             width:40%;
  18.             border:1px solid black;
  19.             padding:10px;
  20.             height:400px;
  21.         }
  22.         span{
  23.             width:300px;
  24.             height:300px;
  25.             border:1px solid red;
  26.             /* span浮动后转为块元素，此时设置的宽高才会生效
  27.             但不建议这么做，因为不符合语义 */
  28.             float:left;
  29.         }
  30.         span:nth-of-type(1){
  31.             float:right;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div>
  37.         <span>span</span>
  38.         <span>span</span>
  39.     </div>
  40. </body>
  41. </html>

 

 

清除浮动对元素的影响：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.         }
  15.         
  16.         div{
  17.             width:100px;
  18.             height:100px;
  19.         }
  20.         div:nth-of-type(1){
  21.             border:3px solid red;
  22.             float:left;
  23.         }
  24.         div:nth-of-type(2){
  25.             border:3px solid orange;
  26.             float:right;
  27.         }
  28.         div:nth-of-type(3){
  29.             border:3px solid green;
  30.             /* 清除它前面的元素左浮动和右浮动带来的影响 */
  31.             clear:both;
  32.         }
  33.         
  34.     </style>
  35. </head>
  36. <body>
  37.     <div></div>
  38.     <div></div>
  39.     <div></div>
  40. </body>
  41. </html>

 

 

使用clearfix清除浮动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.         }
  15.         
  16.         main{
  17.             width:100%;
  18.             border:1px solid pink;
  19.         }
  20.         div{
  21.             width:100px;
  22.             height:100px;
  23.             float:left;
  24.         }
  25.         div:nth-of-type(1){
  26.             border:3px solid red;
  27.             float:left;
  28.         }
  29.         div:nth-of-type(2){
  30.             border:3px solid orange;
  31.         }
  32.         div:nth-of-type(3){
  33.             border:3px solid green;
  34.         }
  35.         .clearfix{
  36.             clear:both;
  37.         }
  38.         
  39.     </style>
  40. </head>
  41. <body>
  42.     <main>
  43.         <div></div>
  44.         <div></div>
  45.         <div></div>
  46.         <article class="clearfix"></article>
  47.     </main>
  48. </body>
  49. </html>

 

 

通过after伪元素清除浮动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.         }
  15.         
  16.         main{
  17.             width:100%;
  18.             border:1px solid pink;
  19.         }
  20.         main::after{
  21.             content:'';
  22.             display:block;
  23.             clear:both;
  24.         }
  25.         div{
  26.             width:100px;
  27.             height:100px;
  28.             float:left;
  29.         }
  30.         div:nth-of-type(1){
  31.             border:3px solid red;
  32.             float:left;
  33.         }
  34.         div:nth-of-type(2){
  35.             border:3px solid orange;
  36.         }
  37.         div:nth-of-type(3){
  38.             border:3px solid green;
  39.         }
  40.         
  41.     </style>
  42. </head>
  43. <body>
  44.     <main>
  45.         <div></div>
  46.         <div></div>
  47.         <div></div>
  48.     </main>
  49. </body>
  50. </html>

 

overflow触发BFC清除浮动：

关于什么是BFC机制，这篇文章写的很好：https://segmentfault.com/a/1190000012988829

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.         }
  15.         
  16.         main{
  17.             width:100%;
  18.             border:1px solid pink;
  19.             /* 只要是overflow都能触发BFC机制 */
  20.             overflow:hidden;
  21.             overflow:auto;
  22.             overflow:scroll;
  23.         }
  24.         div{
  25.             width:100px;
  26.             height:100px;
  27.             float:left;
  28.         }
  29.         div:nth-of-type(1){
  30.             border:3px solid red;
  31.             float:left;
  32.         }
  33.         div:nth-of-type(2){
  34.             border:3px solid orange;
  35.         }
  36.         div:nth-of-type(3){
  37.             border:3px solid green;
  38.         }
  39.         
  40.     </style>
  41. </head>
  42. <body>
  43.     <main>
  44.         <div></div>
  45.         <div></div>
  46.         <div></div>
  47.     </main>
  48. </body>
  49. </html>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13943026.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号