《CSS成长之路》008-浮动布局

猫哥的技术博客
1,178 阅读5分钟

浮动在网页布局中的使用场景

  • 如果你使用过 word, 那么对 word 的图片浮动应该有印象

  • 使用 CSS 也可以实现浮动的效果
  • 我们知道 div 是独占一行的

image-20200407185242175

  • 在商城类的网页中, 往往一行里面不止一个 div

image-20200407185413548

  • 我们可以使用浮动float:left, 来实现一行里面有多个 div

文档流

  • 默认情况下, 块级元素, 从上到下, 行级元素, 从左到右

image-20200407190520633

image-20200407190438875

  • 所谓文档流, 就像上学, 从小学, 到中学, 到大学, 这是一个默认的轨迹
  • 所谓脱离文档流, 意味着从原来的轨迹中脱离了, 比如从大学辍学
  • 辍学以后, 就会有其他同学, 比如插班生, 进入这个班, 顶替你的位置
  • 如果 div 脱离文档流, 就会有其他的 div 来顶替他的位置

image-20200407192354178

image-20200407193005211

  • 下图和上面的效果一样

image-20200407193355707

  • 如果只有第二个(红色)div 浮动, 还是上下关系, 因为绿色的 div 还是占着一行, 红色的上不去

  • 如果是三个 div, 会更直观一些

左浮动和右浮动

  • 如果存在父元素, 父元素的高度是由子元素撑起来的, 而浮动之后, 父元素的高度会缺失

  • 可以使用float:left让 div 左浮动, 也可以使用float:right让元素右浮动

  • 虽然子元素浮动脱离了文档流, 但是父元素的内边距依旧可以影响到它们

浮动后, 行级元素会变成块级元素

  • 我们知道, span是行级元素, 而行级元素无法设置宽高

  • 而浮动之后, 行级元素会变成块级元素

清除浮动

  • 所谓清除浮动, 实际上是清除浮动对元素的影响
  • 我们知道, 如果两个元素, 一个浮动, 另一个就会顶替它的位置

  • 如果我们不想让顶替的事件发生, 或者说要清除第一个元素浮动对第二个元素的影响
  • 我们可以使用clear:left, clear:right,clear:both来清除浮动
  • clear:left 清除 float:left 对元素造成的影响

  • clear:right 清除 float:right 对元素造成的影响

  • clear:both 清除 float:left 和 float:right 对元素造成的影响

清除浮动的应用

  • 解决浮动之后, 父元素高度缺失的问题
  • 我们知道, 子元素设置浮动之后, 父元素的高度会缺失

  • 解决方案: 在最后加一个块级元素, 并设置clear:float即可

  • 原理是设置成清除浮动后, 最后一个块级元素就不会受到前两个 div 的影响
  • 它的位置保持不变, 就把父级元素撑起来了
  • 设置边框之后, 会有直观的感受

使用 after 来清除浮动

  • 元素::after, 相当于给元素增加了一个小儿子
  • 元素::before, 相当于给元素增加了一个大儿子
  • 默认增加的都是行级元素

  • 以为之前就是通过增加小儿子的方式, 来把父级撑起来的

  • 现在我们可以使用父元素::after的方式, 来实现同样的效果
main::after {
    content: "";
    clear: both;
    display: block;
}

触发 BFC

  • 通过触发 BFC, 也可以解决父级元素高度缺失的问题

  • 什么是 BFC

  • BFC（Block Formatting Context）格式化上下文

  • 是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器

  • 当触发 BFC 的后, 计算高度时，浮动元素也参与计算

  • overflow 除了 visible 以外的值（hidden，auto，scroll）皆可触发

  • display 为以下其中之一的值 inline-block，table-cell，table-caption 皆可触发

  • 我们可以设置overflow:hidden

  • 我们也可以设置display:inline-block

高效网页布局

  • 把相关性的元素放到一组

  • 再来看一个例子

布局示例

  • 我们尝试对如下页面进行布局...

image-20200408122955409

  • 先分析一下页面

image-20200408123213344

  • 最外层是一个大的盒子

image-20200408123351142

  • 中型盒子里面有两个小盒子

image-20200408123426638

  • 我们使用 CSS 和 HTML 分离的方式

  • 首先创建标签

demo.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <main>
            <article class="hot">
                <section></section>
                <section></section>
            </article>
        </main>
    </body>
</html>

  • 设置<main>的宽度和边框

style.css

main {
    width: 1020px;
    border: 1px solid #ddd;
}

  • 设置<main>, 左右居中, 高度自动

style.css

main {
	...
    margin: 0 auto;
    overflow: hidden;
}

image-20200408112923141

  • 设置中等盒子
  • 给<article>一个边框

style.css

... main article.hot {
    border: 1px solid red;
}

image-20200408141655422

  • 设置小盒子的宽高, 因为大盒子是 1020 的宽度, 我们可以设置两个 500, 这样中间有 20 的间隔

style.css

... main article.hot section {
    width: 500px;
    height: 300px;
}

image-20200408141853094

  • 我们给两个小盒子各自的背景色

style.css

... main article.hot section:nth-of-type(1) {
    background-color: #ccc;
}
main article.hot section:nth-of-type(2) {
    background-color: #aaa;
}

image-20200408142017429

  • 然后我们设置, 第一个盒子左浮动, 第二个盒子右浮动

style.css

...
main article.hot section:nth-of-type(1) {
	...
	float: left;
}
main article.hot section:nth-of-type(2) {
	...
	float: right;
}

image-20200408142133934

  • 我们发现, 大盒子撑起来了, 但是中盒子没有撑起来
  • 我们可以给中盒子加一个overflow:hidden

style.css

...
main article.hot {
	...
	overflow: hidden;
}
...

image-20200408142239424

  • 我们在给大盒子一个内边距, 这样就更好看一点

style.css

main {
	...
	padding: 10px;
}
...

image-20200408142411191

  • 这样一个简单的布局就完成了, 不过还没有结束, 可以接着往下写, 盒子套盒子

快速跳转

avatar
文章
阅读
粉丝