css学习笔记-float浮动布局

浮动布局

HTML元素的分类

display属性

display:block

可以将不能设置宽度和高度的行内元素变得可以设置高度和宽度，例如a、span

display:none

可以将元素隐藏

float浮动布局

float:left

将元素设置为浮动元素(float),块元素可以在同一行显示

.container{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    float: left;
}
.side{
    width: 100px;
    height: 300px;
    border: 1px solid red;
    float: left;
}

float浮动布局的特性

脱离文档流

会使的元素“飘起来”，不占位

例如：在float布局的元素下添加一个div，则此div会与float元素重叠

 	<div class="container">内容</div>
    <div class="side">侧栏</div>
    <div class="box"></div>

.container{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    float: left;
}
.side{
    width: 100px;
    height: 300px;
    border: 1px solid red;
    float: left;
}
.box{
    width: 500;
    height: 300px;
    background-color: yellow;
}

解决float元素不占位的方案

添加空div清除浮动

clear：both

clear:both

代码：

    <div class="container">内容</div>
    <div class="side">侧栏</div>
    <div class="clear"></div>
    <div class="box"></div>

.container{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    float: left;
}
.side{
    width: 100px;
    height: 300px;
    border: 1px solid red;
    float: left;
}
.box{
    width: 500;
    height: 300px;
    background-color: yellow;
}
.clear{
    clear: both;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0WVkM7dk-1628501766326)(2)]

利用伪元素选择器实现

.clear::before,.clear::after{
    display: block;
    clear: both;
    content: '';
}

可以避免繁琐的添加div，使得页面更加直观