web前端基础（6）三种布局----标准流，浮动

最新推荐文章于 2022-01-19 12:19:30 发布

克罗地亚狂想曲

最新推荐文章于 2022-01-19 12:19:30 发布

阅读量644

点赞数 1

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/u010963053/article/details/105749692

版权

本文介绍了CSS布局中的两种重要方式：标准流（normal flow）和浮动（float）。标准流是默认布局方式，块级元素自上而下显示，行内元素同行显示。浮动布局则用于创建文字环绕效果和多元素并排显示，它使元素脱离标准流但不影响其他浮动元素。文章详细阐述了浮动的概念、规则、特点以及清除浮动的方法，为理解和应用CSS布局提供了基础指导。

摘要由CSDN通过智能技术生成

三种布局

1.标准流（normal flow）

默认的布局

块级元素自上而下显示

行内元素同行显示

2.浮动（float）

2.1 概念

3个参数

float： left; (默认)

float： right;

float： none;

1. 浮动可以用来做文字环绕效果

2.浮动可以让多个div同一行显示

3.浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动

（类似android布局的相对布局，自带对齐，或者线性布局横向显示）

4.浮动的元素总是找离他最近的父级元素对齐，但是不会超出内边距范围。

/*  */
<head> 
    <style>
    .test1 {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 0 auto;
    }
    /* 浮动可以用来做文字环绕效果 */
    img {
        float: right