Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动和BFC
Blogger Information
Blog 8
fans 0
comment 0
visits 7567
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动和BFC
杨向贤
Original
755 people have browsed it

浮动

理解浮动

浮动能将一个元素拉到容器的一侧，这样文档流就能包围它
浮动元素可以跨容器显示
元素浮动后自动转为块级元素

容器折叠和清除浮动

容器折叠

子元素浮动时，容器出现折叠，这是因为浮动元素同于普通文档流的元素，他们的高度不会加到父元素上

一个容器内的浮动元素会扩展到另一个容器，这样两个容器的文字就能围绕浮动元素排列（虚线高亮的部分是容器），在主元素中，出了页面标题，其他元素都设置了浮动，所以容器的高度只包含页面标题的高度，浮动的媒体元素则扩展到主元素的白色背景下。

清除浮动

一种是容器向下扩展，一种是伪元素清除浮动

容器向下扩展，包围了浮动元素，将一个元素放在主容器的末尾，并对它使用clear，这会让容器扩展到浮动元素下面，clear：both;声明让这个元素移动到浮动元素的下面，不是侧面，clear的值是可以设置的

伪元素，不用额外的div标签，使用::after伪元素选择器，最常见的伪元素是::before和::after，用来向元素的开始或结束位置插入内容

清除浮动元素和外边距
display:table，在清除浮动时使用display:table能够包含外边距。

  1. ::before,::after{
  2.   /* 防止伪元素的外边距折叠 */
  3.   display: table;
  4.   content: " ";
  5. }
  6. ::after{
  7.   clear: both;
  8. }

BFC

BFC简称块级格式化上下文，BFC是网页的一块区域，元素基于这块区域布局。BFC是环绕文档流的一部分，但它将内部的内容与外部的上下文隔离开，这种格隔离为创建BFC的元素做了三件事情：

  1. 包含内部所有元素的上下外边距，不会跟BFC外面的元素产生外边距折叠。
  2. 包含了内部所有的浮动元素。
  3. 不会跟BFC外面的浮动元素重叠。
    总之，BFC里面的内容不会跟外部的元素重叠或者互相影响。如果给元素增加clear属性，它只会清除自身所在的BFC内的浮动，如果强制给一个元素生产一个新的BFC，它不会跟其他BFC重叠。
    给元素添加一下任意属性值都会创建BFC。
  • float: left或right，不为none即可。
  • overflow: hidden、auto或scroll，不为visible即可。
  • display: inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid，拥有这些属性的元素叫块级容器。
  • position: absolute或position: fixed。
    网页的根元素也创建了一个顶级的BFC。

浮动和BFC实例

  1. <body>
  2.     <div class="container">
  3.       <header>
  4.         <h1>跑步俱乐部</h1>
  5.       </header>
  6.       <!--  -->
  7.       <main class="main clearfix">
  8.         <div>
  9.           <h2>跑步技巧</h2>
  10.           <div class="media">
  11.             <img class="media-image" src="shoes.png" alt="" />
  12.             <div class="media-body">
  13.               <h4>强度</h4>
  14.               <p>
  15.                 力量训练是一个重要的组成部分。 预防受伤。关注你的核心&mdash;
  16.                 特别是你的腹肌和臀部
  17.               </p>
  18.             </div>
  19.           </div>
  21.           <div class="media">
  22.             <img class="media-image" src="runner.png" alt="" />
  23.             <div class="media-body">
  24.               <h4>加速</h4>
  25.               <p>检查你的步幅周转率。最有效的 跑步者每分钟走180步左右。</p>
  26.             </div>
  27.           </div>
  29.           <div class="media">
  30.             <img class="media-image" src="shoes.png" alt="" />
  31.             <div class="media-body">
  32.               <h4>步伐</h4>
  33.               <p>不要每次打的时候都跑一样的。 改变你的步伐，改变你的距离。</p>
  34.             </div>
  35.           </div>
  37.           <div class="media">
  38.             <img class="media-image" src="runner.png" alt="" />
  39.             <div class="media-body">
  40.               <h4>形态</h4>
  41.               <p>跑得很高但很放松。</p>
  42.             </div>
  43.           </div>
  44.         </div>
  45.       </main>
  46.     </div>
  47.   </body>
  1. /* 全局设置为 border-box */
  2. :root {
  3.   box-sizing: border-box;
  4. }
  6. *,
  7. ::before,
  8. ::after {
  9.   box-sizing: inherit;
  10. }
  12. body {
  13.   background-color: #eee;
  14. }
  16. /* 设置头部颜色和内边距 */
  17. header {
  18.   padding: 1em 1.5em;
  19.   color: #ffffff;
  20.   background-color: #0072b0;
  21.   border-radius: 0.5em;
  22.   margin-bottom: 1.5em;
  23. }
  25. /* 主体的颜色和内边距 */
  26. .main {
  27.   padding: 0 1.5em;
  28.   background-color: #fff;
  29.   border-radius: 0.5em;
  30. }
  32. /* 设置容器的宽度和外边距 */
  33. .container {
  34.   max-width: 1080px;
  35.   margin: 0 auto;
  36. }
  38. /* 
  39.     让四个盒子浮动到左侧，并设置宽度和内边距
  40.     子元素浮动的时候，容器会出现折叠
  41. */
  42. .media {
  43.   float: left;
  45.   /* 给每个media盒子加上右侧和底部的外边距 */
  46.   margin: 0 1.5em 1.5em 0;
  48.   /* 一行放不下两个元素，所以要从宽度中减去外边距，防止出现不必要的换行 */
  49.   width: calc(50% - 1.5em);
  50.   padding: 1.5em;
  51.   background-color: #eee;
  52.   border-radius: 0.5em;
  53. }
  55. /* 给图片添加一个外边距，让它与正文中间出现间隔 */
  56. .media-image {
  57.   float: left;
  58.   margin-right: 1.5em;
  59. }
  61. /* 创建一个BFC，这样正文就不会跟着浮动的图片重叠 */
  62. .media-body {
  63.   overflow: auto;
  64.   margin-top: 0;
  65. }
  67. .media-body h4{
  68.   margin-top: 0;
  69. }
  71. /* 
  72.     选中容器末尾的伪元素 , 不用使用额外的标签
  73.     让 ::before和 ::after伪元素都显示出来
  74. */
  75. .clearfix::before,
  76. .clearfix::after {
  77.   /* 
  78.     防止伪元素的外边距折叠
  79.   */
  80.   display: table;
  81.   content: " ";
  82. }
  84. .clearfix::after {
  85.   /* 清除::after伪元素的浮动 */
  86.   clear: both;
  87. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的不错, 看来你看过: 深入解析CSS
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post