html笔记float属性

最新推荐文章于 2025-01-26 11:06:37 发布

modige_hm

最新推荐文章于 2025-01-26 11:06:37 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/modige_hm/article/details/103910273

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML中float属性的使用，包括left、right和none等值，通过实例展示了如何实现盒模型并列排放。理解float属性对于布局设计至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要实现三个盒模型并列排放，可以使用float属性，float有left，right，none...等多种属性值，具体如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

.mid{

    width: 700px;

    height: 200px;

    background-color:white;

    border: 1px solid black;

    margin: auto;

    font-size: 30px;

    font-style :italic ;color: maroon;

    float: none;

}  

.right{

    width: 200px;

    height: 1000px;

    border: 1px solid black;

    /* margin: auto; */

    font-size: 30px;

    margin-top: auto;

    font-style :italic ;color: maroon;

    float: right;

    

} 

.left{

    width: 200px;

    height: 1000px;

    border:1px solid #fa7d3c;

    margin-left:10px ;

    margin-top: auto;

    float: left;

} 

</style>

<body>

    <div class="left"></div>

  <div class="right"></div>

    <div class="mid">ca</div>

</body>

</html>

结果为