一些关于浮动的认识

最新推荐文章于 2024-07-24 23:00:08 发布

zjjdawang

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量60

点赞数 1

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

本文链接：https://blog.csdn.net/zjjdawang/article/details/125414785

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

float属性解释为浮动，那么究竟是什么意思呢？

1 float是一种定位机制，css有3中定位（普通流、float浮动、position定位）

2 float可以使块状元素脱离文档流，在布局中浮动起来，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘，文档的普通流中的元素表现的就像浮动元素不存在一样.

<!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>
        .big {
            overflow: hidden;
            border-color: #000000;
        }

        .one {
            height: 600px;
            width: 20%;
            margin-left: auto;
            float: left;
            background-color: #A9A9A9;
            text-align: center;

        }

        .right {

            height: 1000px;
            width: 55%;
            margin-left: 1%;
            display: inline-block;

        }

        .bot {
            float: left;

        }

        .img2 {
            float: left;
            width: 200px;
            height: 150px;
        }


        .top {
            width: 800px;
        }

        .top img {
            width: 100%;
        }

        .text {
            line-height: 26px;
            font-size: 0.8rem;
            
            

        }
    </style>
</head>

<body>
    <div class="big">
        <div class="one">
            <h1>
                <font size="80" color="white">logo</font><br />
            </h1>
            <P style="color: white;">某某摄影专辑</P>
            <br>
            网站首页<br />
            <br>
            咨询中心<br />
            <br>
            产品展示<br />
            <br>
            关于我们<br />
            <br>
            练习我们
        </div>
        <div class="right">
            <div class="top">
                <img src="E:\实训2\第三天作业\banner.jpg">
            </div>
            <div class="bot">
                <p>当前位置：首页>我们</p>
                <hr>

                <img src="E:\实训2\第三天作业\01.jpg" class="img2">

                <span
                    class="text">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。
                    水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体
                    面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，全息摄影存储器,全息电影和电视等许多方面。
                </span>
            </div>
        </div>

    </div>

</body>

</html>

今天盒子模型和浮动的复合练习

float:left 应该理解为：在自己本身的位置上脱离文档流，元素从包含框的右边缘向左移动，直到碰到包含框的左边缘或者其他浮动元素框停下，当空间不足以绘制自己则另起一行。

float:right 应该理解为：在自己本身的位置上脱离文档流，元素从包含框的左边缘向右移动，直到碰到包含框的右边缘或者其他浮动元素的框停下，当空间不足以绘制自己则另起一行。