浮动的联系和知识

最新推荐文章于 2025-12-03 18:49:33 发布

原创最新推荐文章于 2025-12-03 18:49:33 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了网页布局中浮动元素的特性，包括如何使元素浮动、浮动如何影响周围元素及文字内容，以及如何清除浮动。同时，文章提及了全息摄影技术，它是种记录物体全面信息的新型摄影技术，应用广泛，如工业探伤、全息电影等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            font-family: '黑体';
            font-size: 90px;
            width: 300px;
            height: 700px;
            background-color: rgb(63, 84, 95);
            float: left;
            text-align: center;
            color: aliceblue;

        }
        .zj{
            font-size: 15px;
            font-family: '宋体';
            color: azure;
        }
        ul {
            list-style: none;
        }

        li {
            float: left;
            margin-left: 25px;
            font-size: 18px;
            color: black;
        }
        div {
            height: 200px;
            float: left;
            margin-right: 1%;
        }
        img{
            height: 350px;
            width: 1150px;
            float: right;
            margin-bottom: 1%;
            margin-right: 1%;
        }
        .tp{
            height: 200px;
            width: 400px;
            float: left;
            margin-bottom: 1%;
            margin-right: 1%;
        }
        span{
            font-size: 21px;
        }
    </style>
</head>
<body>
<div>
    <div class="one" >
    logo
    <p class="zj">某某摄影专辑</p> 
    <ul class="wz">
        <li>网站首页</li><br>
        <li>咨询中心</li><br>
        <li>产品展示</li><br>
        <li>关于我们</li><br>
        <li>联系我们</li><br>
    </ul> 
    </div>
    <img src="../浮动练习/imgs/banner.jpg" alt="">
    <p>当前位置：首页 > 关于我们</p>
    <hr>
    <img class="tp" src="../浮动练习/imgs/01.jpg" alt=""><span>水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。 水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体 面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，全息摄影存储器,全息电影和电视等许多方面。</span>
    <div>

    </div>
</div>
</body>
</html>

浮动的特性：

浮动会遮盖住下面的元素，但是不会遮盖住文字内容

行内元素无法设置宽高

在设置浮动以后，会拥有行内块的特性，可以设置宽度和高度

行内块的特性

1.可以设置宽度和高度

2.会并排显示

3.所占区域大小根据自身内容大小决定

清除浮动

方法一：overflow:hidden

方法二：额外标签法

方法三：伪元素清除浮动