学习记录练习浮动

奋斗要励志

已于 2022-06-22 21:29:20 修改

阅读量124

点赞数 1

文章标签：学习 html

于 2022-06-22 17:42:35 首次发布

本文链接：https://blog.csdn.net/wyh1216/article/details/125413387

版权

运用的软件：

VSCodeUserSetup-x64-1.52.1.exe

语法规则：
选择器{
float:属性值
}
属性值：

例如：

div{
      float: left;
   }

类型：
none:元素不浮动
left:元素左浮动
right:元素右浮动

浮动的特性

1、浮动元素会脱离标准流(脱标)

2、浮动的多个元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

4、浮动的盒子不再保留原先的位置

消除浮动

为什么呢？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

语法规则

选择器{
clear:属性值
}
属性值：
left:清除左侧浮动的影响
right:清除右侧浮动的影响
both:同事清除左右两侧浮动的影响
例如：

div{
      clear: left;
   }

实例：

<!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>浮动</title>
</head>
<style>
   
 .box{
 width:1000px;
 margin:0 auto;
 }
 .left{
 background-color: gray;
 width: 260px;
 height: 585px;
 float: left;
 text-align: center;
 }
 .left-content{
    margin-top: 100px;
 }
 .right{
 width: 700px;
 float: right;
 }
 #img1{
 width: 700px;
 }
 #img2{
 width: 250px;
 float: left;
 }
 #logo{
    font-size: 60px;
    color: white;
    }
 #title{
    color: white;
    height: 50px;
 }

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