css Learning4

最新推荐文章于 2022-02-02 16:09:44 发布

派大星你在那做什么

最新推荐文章于 2022-02-02 16:09:44 发布

阅读量158

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_44451988/article/details/109604661

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

标准文档流和浮动

标准文档流
浮动
- 浮动的性质
- 高度塌陷

标准文档流

内容从左到右，从上到下书写的。前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。

web页面，就是一个标准的文档流。

标准文档流的特性

空白折叠现象
无论多少个空格，tab，换行都会折叠为一个空格。
高矮不同，底部对齐
一行写满，自动换行

行内元素和块级元素

标准文档流将HTML元素分为了两种：

行内元素
块级元素

区别
行内元素：

可以与其他行内元素并排。
宽、高设置是无效的。宽度是随内容自适应。

块级元素：

独占一行，不能与其他任何元素并排。
宽、高可以设置。如果不设置宽，宽将默认为父标签的100%，不设置高度，高度自适应。

HTML标签分为两大类：容器级标签、文本级标签

容器级标签：能嵌套几乎所有的其他标签

文本级标签：只能嵌套文本、图片、超链接、表单元素。

常用的文本级标签：span，p，a，b

常用的容器级标签：div，h1-h6、li、dd dt td.

几乎所有的容器级标签都对应块级元素。

几乎所有的文本标签都对应行内元素。p标签除外，它是文本级标签，都属于块级元素。

行内元素和块级元素的转换

/*块级元素转行内元素*/
display: inline;
/*行内元素转块级元素*/
display: block;
/*转行内块元素*/
display: inline-block;

标准文档流限制比较多，导致页面中很多布局无法实现。如果我们想要并排，又要设置宽高，就要脱离文档流。

css中提供三种方法，可以脱离文档流。

浮动
绝对定位
固定定位

浮动

浮动之后，元素会脱离文档流

浮动的性质

浮动的元素脱标
一旦设置了浮动，那么该元素就能够并排展示，而且可以设置宽和高。
浮动元素互相贴靠
浮动元素会紧贴上一个浮动元素。若宽度不够，会换行。顶部紧帖上一个浮动元素的底部。
浮动元素的“字围”效果
让div浮动，p不浮动：本来让div挡住了p，但是由于文字的字围效果，p中的文字并没有被遮挡，而是包围了div
浮动的元素有“收缩”的效果
当一个元素设置为浮动，且没有设置宽度的时候，它的宽度会自动收缩为内容的宽度。

高度塌陷

子元素都设置了浮动，父元素没有设置高度。那么父元素的高度会变成0，我们称之为高度塌陷。

在标准文档流中，父元素的高度默认是子元素撑开的，也就是说子元素多高，父元素就多高。但是当子元素浮动之后，子元素会脱离文档流，这个时候就无法撑开父元素，导致父元素没有高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        
        ul {
            padding: 0;
            margin: 0;
            background-color: lightskyblue;
        }
        
        li {
            list-style-type: none;
            margin: 10px;
            background-color: lightsalmon;
            float: left;
        }
        
        div {
            clear: both;
        }
    </style>
</head>

<body>
    <ul>
        <li>怦然心动</li>
        <li>怦然心动</li>
        <li>怦然心动</li>
    </ul>
</body>

</html>

我们可以看到 li设置浮动之后父元素ul的高度为0，即高度塌陷

在这里插入图片描述
高度塌陷解决方案

使用::after 伪元素 (推荐)
给需要解决高度塌陷的父元素添加clearfix属性

  .clearfix::after {
      content: "";
      display: block;
      clear: both;
  }

我们给ul添加完clearfix类名后，ul高度恢复，背景色出现
在这里插入图片描述

给浮动元素的父元素加高度。（不推荐）

ul{
	/* 给ul添加height */
	height: 100px;
}

结果如图：ul的背景色蓝色显示，高度为100px，高度正常
在这里插入图片描述
3. 隔墙法：两个浮动元素之间添加一个div，在div中使用clear:both;（不推荐）
4. 内墙法：直接在父元素中添加一个有高度的子元素。（不推荐）
5. 父元素设置 overflow：hidden（不推荐）

2020/11/10

派大星你在那做什么

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css Learning4

标准文档流和浮动标准文档流标准文档流的特性行内元素和块级元素HTML标签分为两大类：容器级标签、文本级标签行内元素和块级元素的转换浮动浮动的性质高度塌陷标准文档流内容从左到右，从上到下书写的。前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。web页面，就是一个标准的文档流。标准文档流的特性空白折叠现象无论多少个空格，tab，换行都会折叠为一个空格。高矮不同，底部对齐一行写满，自动换行行内元素和块级元素标准文档流将HTML元素分为了两种：行内元素块级元素区别行
复制链接

扫一扫