day07.06.HTML浮动

追梦女孩ii

已于 2024-07-18 21:05:49 修改

阅读量247

点赞数 5

分类专栏： HTML 一阶段day07 一阶段文章标签： css 前端 html python 数据分析 numpy css3

于 2024-06-26 21:59:24 首次发布

本文链接：https://blog.csdn.net/m0_61566562/article/details/139999556

版权

一阶段同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

一阶段day07

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {width: 100px; height: 100px; background: orange; float: left;}
.box2 {width: 100px; height: 100px; background: red; float: left;}
.box3 {width: 100px; height: 100px; background: blue; float: left;}
.box4 {width: 100px; height: 100px; background: green; float: left;}
</style>

<!--
浮动 float
作用是水平布局
float: left ;向左浮动
float: right ;向右浮动
如果有一个设置浮动四个都需要设置浮动要么全向左要么全向右
全向右的时候 box1会变成最右边的比较特殊，一般不会设置全部向右

清浮动： clear:both
clear:left/right/both
解决浮动带来的div重叠的影响
-->

</head>
<body>
<div class = "box1">box1</div>
<div class = "box2">box2</div>
<div class = "box3">box3</div>
<div class = "box4">box4</div>

<div style = "clear: both; width: 600px; height: 300px; background: pink;">hello</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {width: 100px; height: 100px; background: orange; float: left;}
        .box2 {width: 100px; height: 100px; background: red; float: left;}
        .box3 {width: 100px; height: 100px; background: blue; float: left;}
        .box4 {width: 100px; height: 100px; background: green; float: left;}
    </style>

<!--
        浮动 float
          作用是水平布局
            float: left ;向左浮动
            float: right ;向右浮动
        如果有一个设置浮动  四个都需要设置浮动 要么全向左要么全向右
                全向右的时候 box1会变成最右边的  比较特殊 ，一般不会设置全部向右

        清浮动： clear:both
            clear:left/right/both
            解决浮动带来的div重叠的影响
    -->


</head>
<body>
    <div class = "box1">box1</div>
    <div class = "box2">box2</div>
    <div class = "box3">box3</div>
    <div class = "box4">box4</div>

    <div style = "clear: both; width: 600px; height: 300px; background: pink;">hello</div>
</body>
</html>