CSS浮动与定位

1 浮动

1.1 浮动概述

与标准文档流对应的是浮动流,浮动元素不占有文档空间,就像浮在页面之上一样,浮动元素不区分块元素还是行内元素。在父元素内,子元素放得下就放,放不下就下一行放,浮动元素必须贴着上一个浮动元素排放
CSS浮动与定位_第1张图片

1.2 设置浮动:float: left/right
<style>
        .father {
            /* 父元素 */
            height: 500px;
            width: 500px;
            background-color: aqua;
        }
        .son {
            height: 200px;
            width: 200px;
            background-color: red;
            border: 1px black solid;
            /* 子元素添加浮动 */
            float: left;
        }

       
        
    style>

<div class="father">
        <div class="son">div>
        <div class="son">div>
        <div class="son">div>
    div>

CSS浮动与定位_第2张图片

可以看到,**通过给子元素设置浮动,子元素脱离了标准流,**紧挨着临近的一个浮动的子元素,右边小缝隙放不下第三个子元素,于是第三个子元素放到了第二行。

运用案例:电商平台商品展示

1.3 父元素塌陷问题

如果像上图一样父元素高度定死,显然只能显示四个子元素,多出的必然会溢出父盒子,这是我们不愿意看到的。
CSS浮动与定位_第3张图片

我们希望不给父元素设置高度,当内容增加的时候父元素高度会根据需要撑开

.father {
            /* 父元素不给高度 */
            /* height: 500px; */
            width: 500px;
            background-color: aqua;
        }
        .son {
            height: 200px;
            width: 200px;
            background-color: red;
            border: 1px black solid;
            /* 子元素添加浮动 */
            float: left;
        }

发现父盒子高度居然是零
CSS浮动与定位_第4张图片

这就是父元素塌陷问题,解决方法就是清除浮动

1.4 清除浮动

clear:left:清除左侧浮动

clear:right:清除右侧浮动

clear:both:全部清除

清除浮动的四种方法

  • **万能适用法(重要):**父元素添加伪类选择器
<style>
	.father:after{
            Content:"";
            Clear:both;
            display:block;
            Height:0;
            Overflow:hidden;
            Visibility:hidden
     }
	
style>
  • 父级定义overflow:hidden;
    • 缺点:超出部分被隐藏
  • 父级定义overflow:auto
    • 缺点:出现滚动条
  • 浮动元素后面添加一个新标签
    • 缺点:出现多余标签不利于维护
<div class="father">
        <div class="son">div>
        <div class="son">div>
        <div class="son">div>
        <div class="son">div>
        <div class="son">div>
        <div class="son">div>
    
        <div style="clear: both;">div>
    div>

2 定位

元素定位在布局中非常重要,定位属性为position,是另一种重要布局方式(定位流)

2.1 绝对定位position:absolute

绝对定位是相对于父盒子而言

<style>
        .box {
            /* 设置定位 */
            position: absolute;
            /* 设置距离父盒子上侧距离 */
            top: 200px;
            /* 设置距离父盒子左侧距离 */
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
       
    style>
<div class="box">

CSS浮动与定位_第5张图片

2.2 相对定位position: relative;

相对定位是相对于原来应该在的位置而言

<style>
        .box1 {

            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .box2 {
            /* 设置定位 */
            position: relative;
            top: 200px;
            left: 200px;
            height: 200px;
            width: 200px;
            background-color: red;
            
        }
       

       
        
    style>

<div class="box1">div>
<div class="box2">div>

CSS浮动与定位_第6张图片

  • 绝对定位通常要配合相对定位使用,因为绝对定位会根据最近一个有定位的父盒子的位置进行定位。也就是“子绝父相”。

  • 添加了绝对定位的元素会脱标(脱离标准流),不占有位置,就像浮在一个固定的位置一样

  • 添加了相对定位的元素不会脱标,继续占有原来的位置,只是可能显示在别的位置而已,显示位置不影响该位置原来的元素

<style>
        .box1 {

            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .box2 {
            /* 设置定位 */
            position: relative;
            top: 200px;
            left: 200px;
            height: 200px;
            width: 200px;
            background-color: red;
            
        }
        
    style>
<div class="box1">div>
    <div class="box2">div>
    <div class="box1">div>

CSS浮动与定位_第7张图片

2.3 固定定位position: fixed;

固定定位相是对于窗口而言的,设置固定定位的元素脱标

<style>   
        .box {
            position: fixed;
            top: 400px;
            left: 200px;
            height: 300px;
            width: 100px;
            background-color: red;
            
        }
      
    style>

head>


<body style="padding-bottom: 2000px;">
    <div class="box">div>
body>

CSS浮动与定位_第8张图片

2.4 粘性定位position:sticky(了解)

当元素的position属性设置为sticky则开启了元素的粘滞定位粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素达到某个位置时将其固定

2.5 position:static(不设置定位时的默认值)

你可能感兴趣的:(css,前端,html)