css---清除浮动与定位

最新推荐文章于 2024-10-15 22:46:31 发布

奢คิดถึง

最新推荐文章于 2024-10-15 22:46:31 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/pet_ch/article/details/105779597

版权

一、清空浮动的方法

<style>
    .box-1{
        width:100px;
        height:100px;
        background: blue;
        float: left;
    }
    .box-2{
        width:150px;
        height:150px;
        background: orange;
        float: left;
     }
</style>
<body>
<div class="box1">
    <div class="box-1">1</div>
    <div class="box-2">2</div>
</div>
</body>

1.在最后一个浮动的元素后添加一个空标签，并设置样式：clear:both

<div class="box1">
    <div class="box-1">1</div>
    <div class="box-2">2</div>
    <div style="clear:both"></div>	
</div>

 小结： 优点---写法简单   缺点---添加了无意义的标签

2.给浮动元素的父元素添加样式：overflow:hidden;

 .box1{
      border:1px solid #000;
      overflow: hidden;
 }

小结：优点---代码简洁   缺点---内容增多时会导致内容不自动换行，从而使内容被隐藏

3.使用after伪元素清除浮动–定义一个清除浮动的样式，加给浮动元素的父元素

     //定义清除浮动的样式
      .clearfix:after{
          content: "";
          display: block;
          height:0;
          visibility:hidden;
          clear:both;
      }
      .clearfix{
         zoom:1;    //ie6,7 专门清除浮动的样式
      }
   /*加给父元素*/
   <div class="box1 clearfix">

小结：原理同第一种方法---添加标签法，不过添加的使伪元素，不会产生无用的标签，
 也没有设置超出部分隐藏，所有避免了前两种方法的缺点，推荐使用

4.使用双伪元素的方式清除浮动，设置样式并添加给父元素

  /*双伪元素清除浮动元素*/
        .clearfix:after,.clearfix:before{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom:1;
        }
   /*加给父元素*/
   <div class="box1 clearfix">

二、定位

1.定位方式

静态定位—static：即无定位
相对定位—relative
a. 相对于元素在标准流中的原来的位置进行偏移
b. 原来在标准流中占有的位置继续占有
相对定位—absolute：相对于带有定位父级元素进行移动
a. 相对于带有定位的父级元素进行移动(父级元素不限于父亲元素，可以是所有祖先元素), 由内向外依次找带有定位的父级元素
b. 如果父级元素都没有定位，相对于文档流或者浏览器进行移动
c. 如果父级元素有定位，相对于父级元素进行移动
d. 绝对定位的元素完全脱离文档流，不保留原来的位置
固定定位—fixed：相对于浏览器的可视窗口

a. 固定定位完全脱离标准流，不占位置
b. 固定定位的元素跟父级元素没有任何关系

三、浮动、固定定位、绝对定位改变元素的display属性

不管是行内元素还是块级元素，只要设置了浮动 / 固定定位 / 绝对定位，都会变为行内块元素，即 display:inline-block;
行内块元素的大小由内容决定，没有内容，元素不会被撑开，即没有大小

四、绝对定位和固定定位的元素居中

设置了绝对定位和固定定位的元素，不能使用margin:auto进行居中；
设置居中的方法—以300*300的元素为例（在任何大小的屏幕上都可以实现水平垂直居中）

 .middle{
     width: 200px;
     height: 200px;
     background: pink;
     position:fixed;
     left:50%;      //left、top值分别设为50%
     top:50%;
     margin-left:-100px;   //由于元素自身的宽，设置margin-left:-元素宽的一半 实现水平居中
     margin-top:-100px;    //由于元素自身的高，通过margin-top:-元素高的一半 实现垂直居中
 }