圣杯布局和双飞翼布局

最新推荐文章于 2025-05-29 16:16:54 发布

sunpermeer

最新推荐文章于 2025-05-29 16:16:54 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

分类专栏：日常总结个人总结文章标签： html js

本文链接：https://blog.youkuaiyun.com/CRCFeng/article/details/117740482

日常总结同时被 2 个专栏收录

38 篇文章

订阅专栏

个人总结

34 篇文章

订阅专栏

个人理解：

元素被设置成float: left或right; 之后，从表现上来看就像当前元素占用当前布局流的一块区域，并且不影响周围元素的正常布局;
margin相当于推开周围其它元素的距离（为负值时相当于周围元素可以覆盖当前元素的距离），margin规则同样适用于float元素

1、先添加float元素，后添加块级元素，块级元素不会另起一行。

<div style="width: 100px; height: 100px; background: red; float: left;"></div>
<div style="background: pink;">block</div>

2、先添加float元素，后添加块级元素，并且给float元素设置margin

<div style="margin-right: -50px; width: 100px; height: 100px; background: red; float: left;"></div>
<div style="background: pink;">block</div>

3、先添加块级元素再添加float元素，float元素会另起一行。

<div style="background: pink;">block</div>
<div style="width: 100px; height: 100px; background: red; float: left;"></div>

其实明白了float和margin的原理和现象后就很容易实现圣杯和双飞翼布局了（有很多种方式可以实现，这里只记录两种方式）。

双飞翼布局
根据上述的第一种情况，先添加左右两个float元素，然后添加中间块级元素，则块级元素会自动填充除去两个float元素后剩下空间（为了防止块级元素在超出float元素高度后，环绕float元素，则需要设置左右的margin，margin距离为左右float元素的宽度，如果块级元素不设置margin则会出现下图的情况）
在这里插入图片描述

<div style="width: 100%; background: pink; overflow: auto; min-weight : 550px;">
    <div style="text-align: center; background: darkcyan;">header</div>
    
    <div class="left" style="width: 300px; float: left; background: lightblue; word-break: break-all;">
      left left left left left left left left left left left left left left left left left left 
      left left left left left left left left left left left left left left left left 
      left left left left left left left left left left left left left left left left 
      left left left left left left left left 
      left left left left left left left left left left left left left left left left 
    </div>


    <div class="right" style="width: 250px; float: right; background: lightgray; word-break: break-all;">
      right right right right right right right right right right right right right right right
      right right right right right right right right right right right right right right
      right right right right right right right right right right right right
    </div>

    <div class="middle" style="margin: 0 250px 0 300px; background: cornflowerblue; word-break: break-all; margin-top: 0px;">
      middle1 middle middle middle middle middle middle middle middle middle middle middle middle middle 
      middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
      middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
    </div>
    <div style="width: 100%; clear: both; background: darkcyan; text-align: center;">footer</div>
  </div>

在这里插入图片描述
圣杯布局
为了让left元素能推入到middle元素，并且与middle左侧对齐，则left元素要设置宽度与middle元素相同的负的margin-left（因为middle元素宽度是100%，所以left元素margin-left: -100%;效果如图）

然后把left元素左移（左移距离为left元素的width）
在这里插入图片描述
right元素同理

<div style="margin-top: 40px; text-align: center; background: darkcyan;">header</div>
  <div class="container" style="padding: 0 250px 0 300px; background: pink; overflow: hidden; margin: 0; min-width: 850px;">
    <div class="middle" style="width: 100%; background: cornflowerblue; word-break: break-all; float: left; position: relative;">
      middle1 middle middle middle middle middle middle middle middle middle middle middle middle middle 
      middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
      middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
      middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
      middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
    </div>

    <div class="left" style="position:relative; margin-left: -100%; left: -300px; width: 300px; float: left; background: lightblue; word-break: break-all;">
      left left left left left left left left left left left left left left left left left left 
      left left left left left left left left left left left left left left left left 
      left left left left left left left left left left left left left left left left 
      left left left left left left left left 
      left left left left left left left left left left left left left left left left 
    </div>
    
    <div class="right" style="margin-left: -250px; right: -250px; position: relative; width: 250px; float: left; background: lightgray; word-break: break-all;">
      right right right right right right right right right right right right right right right
      right right right right right right right right right right right right right right
      right right right right right right right right right right right right
    </div>
  </div>
  <div style="width: 100%; clear: both; background: darkcyan; text-align: center;">footer</div>

在这里插入图片描述
注意：
container的最小宽度为container水平方向上的padding之和，再加上left元素的宽度（因为middle元素宽度不能小于left元素的宽度，如果middle元素的宽度小于了left元素的宽度，则left元素就会占用left.width - middle.width的水平位置，又因为middle的width是100%，所以此时left元素会另起一行）