6.CSS布局 -- 浮动布局

1.CSS布局 – 浮动布局

1.1 什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版。

1.2 标准流(文档流 / 普通流)排版方式

  • 标准流(文档流 / 普通流)
  • 标准流(文档流 / 普通流)处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在标准流(文档流 / 普通流)中。
  • 元素在标准流(文档流 / )中的特点:
  • 块元素
  1. 块元素在标准流(文档流 / 普通流 )中会独占一行,块元素会自上向下排列。
  2. 块元素在标准流(文档流 / 普通流)中默认宽度是父元素的100%
  3. 块元素在标准流(文档流 / 普通流)中的高度默认被内容撑开。
  • 内联元素
  1. 内联元素在标准流(文档流 / 普通流)中只占自身的大小,默认从左向右排列,如果一行中不足以容纳所有的内联元素,则会换到下一行,继续自左向右。
  2. 在标准流(文档流 / 普通流)中,内联元素的宽度和高度默认被内容撑开。
  1. 其实浏览器默认的排版方式就是标准流的排版方式。
  2. 在CSS中将元素分为3类,分别是块级元素 / 行内元素 / 行内块级元素。
  3. 在标准流中有两种排版方式,一种是垂直排版,一种是水平排版。
  • 垂直排版:如果元素是块级元素,那么就会垂直排版。
  • 水平排版:如果元素是行内元素 / 行内块级元素,那么就会水平排版。
  1. 如果希望块元素在页面中水平排列,可以使块元素脱离标准流(文档流 / 普通流),使用float来使元素浮动,从未脱离标准流(文档流 / 普通流)。

float可选值:

  • none:默认值,元素默认在标准流(文档流 / 普通流)中排列。
  • left:元素会立即脱离标准流(文档流 / 标准流),向页面左侧浮动。
  • right:元素会立即脱离标准流 (文档流 / 普通流),向页面右侧浮动。

当为一个元素设置浮动以后(float属性是一个非none的值),元素会立即脱离标准流(文档流 / 普通流),元素脱离标准流(文档流/普通流)以后,它下边的元素会立即向上移动,那么这个时候前面一个元素就会盖住后面一个元素。

  • 元素浮动以后,会尽量向页面的左上或者是右上漂浮,直到遇到父元素的边框或者其他的浮动元素
  • 如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素。
  • 浮动的元素不会超过他上边的兄弟元素,最多最多一边齐。

2.浮动流排版方式

  1. 浮动流是一种“半脱离标准流”的排版方式。
  2. 浮动流只有一种排版方式,就是水平排版。它只能设置某个元素左对齐或者右对齐。

2.1 浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字,没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。

注意点:

  1. 浮动流中没有居中对齐,也就是没有center这个取值。
  2. 在浮动流中是不可以使用margin:0 auto;

特点:

  1. 在浮动流中是不区分块级元素 / 行内元素 / 行内块级元素的,无论是块级元素 / 行内元素 / 行内块级元素都可以水平排版。
  2. 在浮动流中无论是块级元素 / 行内元素 /行内块级元素都可以设置宽高。
  3. 综上所述,浮动流中的元素和标准流中的行内块级元素很像。

2.2 高度塌陷

  • 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素有多高,父元素就多高。
  • 但是当子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
  • 由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样会导致页面布局混乱。

解决高度塌陷:

  1. 在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死,以避免塌陷的问题出现,但是一旦把高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方式不推荐使用。
  2. 可以直接在高度塌陷的父元素最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动(使用clear标签),这样可以通过这个空白的div来撑开父元素的高度,基本没有副作用。

使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。

clear属性取值:

  • none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右负担)。
  • left:不要找前面的左浮动元素。
  • right:不要找前面的右浮动元素。
  • both:不要找前面的左浮动元素和右浮动元素。
  1. 通过after伪类

可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用。

*.clearfix::after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}

2.3 CSS两列布局以及三列布局

2.3.1 两列布局:左边定宽,右边自适应
.left {
    float: left;
    width: 300px;
    background-color: blue;
}
.right {
    overflow: auto;
    background-color: red;
}

<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
2.3.2 BFC
2.3.2.1 定义:

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

BFC(block formatting context)块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则,它决定了元素如何对齐内容进行布局,以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局

总结:BFC是一个独立的的布局环境,BFC内部的元素布局与外部互不影响。

2.3.2.2 BFC的布局规则
  1. 内部的Box会在垂直方向一个接着一个地放置。
  2. Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
  3. 每个盒子的左外边框紧挨着包含块的左边框,即使浮动元素也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  6. 计算BFC的高度时,浮动子元素也参与计算。
2.3.2.3 哪些元素会生成BFC
  1. 根元素
  2. float属性不为none
  3. positionabsolutefixed
  4. displayinline-block table-cell table-caption flex inline-flex
  5. overflow不为visible
2.3.2.4 BFC的作用
2.3.2.4.1 解决浮动元素令父元素高度坍塌的问题

方法:给父元素开启BFC

原理:计算BFC的高度时,浮动元素也参与计算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 父元素 */
    .div1 {
      width: 1000px;
      border: 10px solid red;
      /* BFC */
      overflow: hidden;
    }
    /* 子元素 */
    .div2 {
      width: 200px;
      height: 400px;
      background-color: blue;
      float: left;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2"></div>
  </div>
</body>
</html>
2.3.2.4.2 两栏自适应布局

方法:给固定栏设置固定宽度,给不固定栏开启BFC

原理:BFC的区域不会与float box 重叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .left {
      float: left;
      width: 300px;
      background-color: blue;
    }
    .right {
      /* 
        overflow:auto;(隐藏溢出的内容)利用BFC
      */
      overflow: auto;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="left">左边定宽</div>
  <div class="right">
    右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
  </div>
</body>
</html>
2.3.2.4.3 三列布局:两边定宽,中间自适应
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: #999;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .center {
            /* 中间模块空出左右距离,设置浮动 */
            margin: 0 200px;
            height: 300px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Div CSS 页面布局——左中右版式是一种常见的网页布局方式。在这种布局中,页面被分为左侧、中间和右侧三个区域,每个区域可以分别放置内容。 在HTML中,我们可以使用div元素来创建这样的布局。首先,我们需要设置一个父div元素,并为其设置宽度,以适应整个页面的大小。然后,我们可以创建三个子div元素,分别用于左侧、中间和右侧区域。 对于左侧和右侧区域,我们可以通过设置宽度和浮动属性来控制其位置。例如,我们可以设置左侧div的宽度为25%,右侧div的宽度为25%,并将它们都向左浮动。这样,左侧和右侧的区域就会分别占据页面的左边和右边。 对于中间区域,我们可以简单地将其放在左侧和右侧区域之后。由于左侧和右侧区域都是浮动的,中间区域将会自动填充剩余的空间。 为了避免中间区域被覆盖,我们可以使用clear属性来清除浮动。我们可以在中间区域div的CSS样式中添加clear:both来确保中间区域在内容的上方和下方都没有浮动元素。 除了设置区域的宽度和浮动属性外,我们还可以使用其他CSS属性来进一步调整页面布局。例如,我们可以通过设置边距、内边距和背景颜色来美化页面。 总的来说,Div CSS 页面布局——左中右版式是一种简单而实用的布局方式,可以帮助我们将页面划分为多个区域,并在不同的区域放置不同的内容。通过灵活运用CSS属性,我们可以轻松地创建出各种漂亮的页面布局

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值