layout - 浮动问题 | Clearfix 在我的个人博客上

Question

我为我的项目创建了一个自定义网格。在 about 行中，我们有两个均匀分布的列。右侧的列有一个绝对定位的容器，具有相对父级。这似乎破坏了布局。已应用 Clearfix，::after但.row.不确定是什么问题。

在主要部分之后添加了页脚，但是，如果我们将屏幕尺寸缩小，布局似乎会中断。

HTML 部分

<main class="about-section">
        <h2 class="about-section__heading">What I love</h2>
        <section class="about-section__subheading">Why and how I built this site</section>


        <div class="row">
            <div class="col-1-of-2 about-section__text">
                <h3 class="margin-bottom-med text-center">Why I built this Website.</h3>
                <p class="text-top">
                    This is a hobby. I have been studying front and backend web development for a few years. I am a
                    self-taught web developer.
                    My basic interest is in modern web development - Primarily, front-end web development.On the
                    back-end, I have a bit of experience in PHP. I am currently studying javascript and node. This
                    website will be a platform for articles and my portfolio.
                </p>
            </div>
            <div class="col-1-of-2 about-section__images">
                <h3 class="margin-bottom-med text-center">How I built this site.</h3>
                <p class="text-center">Following tools and techniques are used</p>
                <div class="composition">
                    <img src="images/html5.svg" alt="HTML" class="composition__photo composition__photo--3">
                    <img src="images/js.svg" alt="javascript" class="composition__photo composition__photo--1">
                    <img src="images/sass.svg" alt="SASS" class="composition__photo composition__photo--2">

                </div>
            </div>
        </div>

    </main>

SCSS

//Grid Specifications
$grid-width:114rem;
$gutter-vertical:2rem;
$gutter-horizontal:4rem;


@mixin clearfix
{
    &::after
    {
        content: "";
        display: table;
        clear:both;
        // setting content to "" and displaying the element as a table along with the clear property will clear the floating columns. 
    }
}


.row {
    max-width: $grid-width;
    margin: 0 auto;


    &:not(:last-child) {
        margin-bottom: $gutter-vertical;
    }

    @include clearfix;


      // Total width of the grid - the horizontal gutter divided by two to calculate the width
        // To use the sass variables in the calc funtion we will have to surround them in parenthesis and put a pound sign in front of them. This is because, calc function will process these details on the client machine and SASS is not compiled during execution of the css code on the client machine, but rather is compiled to css during development.

        // We use 100% in place of grid width because we want to make sure that the layout is responsive. For this, we will have to consider the width as 100% which is equal to $grid-width -- 1140px / 114 rem;
        
        // Floating left will align the grids side by side. `enter code here`
        
    .col-1 {
      
        float:left;

        &-of-2 
        {
            @extend .col-1;
            width: calc((100% - #{$gutter-horizontal}) / 2); 
        }

        &-of-3
        {
            @extend .col-1;
            width: calc((100% - (#{$gutter-horizontal})*2) / 3); 

        }

        &-of-4
        {
            @extend .col-1;
            width: calc((100% - (#{$gutter-horizontal})*3) / 4); 

        }

        &:not(:last-child) {
            margin-right: $gutter-horizontal;
        }

    }

}

.composition{
   position: relative;

    &__photo{
        width:32%;
        position:absolute;
        

    &--1 // JS
    {   
        left: 30%; 
        top: 5rem;
        border-radius:200%;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.363);      
    }  
    
    &--2 // SASS
    {   
        left:55%;
        top:14rem;     
    }   

    &--3 // HTML
    {   
        left:10%;
      
    }   
    }
} 

标签： layoutsasspositioningclearfix