浮动float

最新推荐文章于 2023-07-02 20:01:50 发布

猫与猫寻

最新推荐文章于 2023-07-02 20:01:50 发布

阅读量153

点赞数

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

本文链接：https://blog.csdn.net/a1399028618/article/details/118850752

版权

前端html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文档流：html元素按书写顺序进行排列，从左到右，从上到下，也叫标准流
css两大功能：
1）.控制元素的样式；2. 控制元素的位置（布局）
2.布局前提:浏览器交出页面布局的权限，交给用户，将元素从文档流中脱离出来
3.脱离文档流的手段:浮动，绝对定
4.浮动可以将元素在水平方向上自由移动，垂直仍在文档中

 <h1>欢迎新同学</h1>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>

    <div class="box4"></div>

css`

.box1 {
    width: 150px;
    height: 150px;
    background-color: lightblue;
}

.box2 {
    width: 150px;
    height: 150px;
    background-color: lightgreen;
}

.box1 {
    float: left;
}

.box2 {
    float: right;
}

.box3 {
    width: 200px;
    height: 200px;
    float: right;
    background-color: red;
}

.box4 {
    height: 100px;
    background-color: gray;
}

.box4 {
    clear: left;
}