HTML/CSS -- 利用float进行页面布局

梦里梦外; 2022-04-10 02:15 384阅读 0赞

布局1： 高度已知，左边固定，右边自适应

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70

当我们缩小浏览器窗口时，黄色自动缩小

  1. <section>
  2.         <article>
  3.             <style>
  4.                 .part2-content-wrap div {
  5.                     height: 300px;
  6.                 }
  7.                 .part2-content-left {
  8.                     width: 300px;
  9.                     float: left;
  10.                     background: red;
  11.                 }
  12.                 .part2-content-right {
  13.                     width: 100%;
  14.                     background: yellow;
  15.                 }
  16.             </style>
  17.             <div class = "part2-content-wrap"> 
  18.                 <div class = "part2-content-left"></div>
  19.                 <div class = "part2-content-right">
  20.                     <h1>使用浮动方案解决</h1>
  21.                     <p>高度已知，左边固定，右边自适应</p>
  22.                 </div>
  23.             </div>
  24.         </article>
  25.     </section>

高度已知，右边固定，左边自适应同理可得！

布局2：高度已知，两边宽度已知，中间自适应

20181223225453890.png

当我们缩小浏览器窗口时，绿色自动缩小

  1. <section>
  2.         <article>
  3.             <style>
  4.                 .part1-content-wrap div{
  5.                     height: 100px;
  7.                 }
  8.                 .part1-content-left {
  9.                     float: left;
  10.                     width: 300px;
  11.                     background: red;
  12.                 }
  13.                 .part1-content-right {
  14.                     float: right;
  15.                     width: 300px;
  16.                     background: yellow;
  17.                 }
  18.                 .part1-content-center  {
  19.                     background: green;
  20.                     text-align: center;
  21.                 }
  22.             </style>
  23.             <div class = "part1-content-wrap">
  24.                 <div class = "part1-content-left"></div>
  25.                 <div class = "part1-content-right"></div>
  26.                 <div class = "part1-content-center">
  27.                     <h1>使用浮动方案解决</h1>
  28.                     <p>高度已知，两边宽度已知，中间自适应</p>
  29.                 </div>
  30.             </div>
  31.         </article>
  32.     </section>

我们来看一下浮动布局带来的问题

看如下代码：

  1. <style>
  2.         .content-wrap {
  3.             width: 500px;
  4.         }
  5.         .content {
  6.             float: left;
  7.             width: 120px;
  8.             height: 100px;
  9.             margin: 0 10px 10px 0;
  10.             background: red;
  11.         }
  12.         .target{
  13.             height: 120px;
  14.         }
  15.     </style>
  16.     <div class = "content-wrap"> 
  17.         <div class = "content"></div>
  18.         <div class = "content target"></div>
  19.         <div class = "content"></div>
  20.         <div class = "content"></div>
  21.         <div class = "content"></div>
  22.         <div class = "content"></div>
  23.         <div class = "content"></div>
  24.     </div>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1

不难发现，利用float布局，如果高度不一样，就出现问题了，这也是float布局的重大缺席。

float本身带来的麻烦。

1：使得inline元素block化

  1. <style>
  2.          .target{
  3.              float:left;
  4.              background: red;
  5.              width: 50px;
  6.              height: 50px;
  7.          }
  9.     </style>
  10.      <span class = "target">6666</span>

20181224111425740.png

2：包裹性

  1. <style>
  2.         .content-wrap{
  3.             border: 1px solid red;
  4.             float: left
  5.         }
  6.         .target{
  7.             width: 60px;
  8.             height: 60px;
  9.             background: yellowgreen
  10.         }
  11.     </style>
  13.      <div class = "content-wrap">
  14.          <div class = "target"></div>
  15.      </div>

20181224112410504.png

3：破坏性

因为float元素会脱离文档流（与position: absolute不一样），会导致好像没有高度一样。

  1. <style>
  2.         nav div {
  3.             height: 100px;
  4.             width: 500px;
  6.         }
  7.         .nav-left{
  8.             float: left;
  9.             background: red;
  10.         }
  11.         .nav-right{
  12.             float: right;
  13.             background: yellow;
  14.         }
  15.         .content {
  16.             height: 500px;
  17.             background: green;
  18.         }
  19.     </style>
  21.     <nav>
  22.         <div class = "nav-left" ></div>
  23.         <div class = "nav-right" ></div>
  24.     </nav>
  25.     <article>
  26.         <div class = "content"></div>
  27.     </article>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2

因为红色和黄色都浮动了，所以绿色就会往上移动。

清除float

1：利用clear属性

2：开启BFC

clear属性

我们之所以能够使用clear解决float引起的父元素塌陷问题，其实就是因为加了clear的空标签或者是那么伪类元素，把top值设置在了浮动元素的bottom边缘下方，从而能够撑起父元素

  1. nav::after{
  2.             content: "";
  3.             display: table;
  4.             clear: both;
  5.         }

display:table;是为了防止子元素垂直方向上的边距折叠，也就是通常说的子元素margin-top会被转移到父元素的问题

20181224114643432.png

父元素开启BFC(google BFC）

  1. nav {
  2.             overflow: hidden;
  3.         }

也完全没有问题

float布局：兼容性比较好，简单方便，但是也有本身的局限性和float本身带来的问题。

最后提一句：float原本是实现文字环绕效果的，不忘初心。

发表评论

表情：
评论列表 （有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS - 浮动布局（float）

    目录 标准布局 标准流 浮动与浮动流，及元素脱标概念 浮动元素 浮动的特点 浮动带来的问题：标准流父级容器高度塌陷 清除浮动 浮动布局 + margin负值

    小灰灰小灰灰/ 0 赞/ 161 阅读