CSS笔记

8.15

1.浮动（float）

float 属性定义元素向哪个方向浮动。之前这个属性应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，而不论它本身是何种元素。 有三种取值：

1.none 默认值，不浮动

2.left 左浮动

3.right 右浮动

1.1.浮动的使用

浮动简单来说就是将独占一行的块元素在不改变特性的情况下进行横向排列，有两种使用方式

1.元素统一向左或向右浮动

2.元素分别向两边浮动

1.1.1元素统一向左或向右浮动

演示为向左，向右同理

演示如下

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS

div{
    width: 100px;
    height: 100px;
    float: left;
}
.one{
    background-color: red;
}
.two{
    background-color: green;
}
.three{
    background-color: blue;
}

效果

1.1.2.元素分别向两边浮动

演示如下

HTML

 <div class="one">one</div>
 <div class="two">two</div>
 <div class="three">three</div>

CSS

div{
    width: 100px;
    height: 100px;
}
.one{
    background-color: red;
    float: left;
}
.two{
    background-color: green;
    float: right;
}
.three{
    background-color: blue;
    float: left;
}

1.2.浮动的特性

1.浮动元素会去找离它最近的有浮动的元素进行贴边

2.假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行

3.右浮动会颠倒盒子顺序

4.行内元素设置了浮动后，默认已转为块级元素，可以直接设置宽高，无需转换

5.块级元素，如果没有设置宽高，浮动后， 会收缩到内容的大小

6.浮动元素会脱离文档流，会压住下⼀个块元素，但不会压住其内容

演示如下

HTML

<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<span class="box-span">5</div>
<div class="box-div">6</div>

CSS

/* 特性1 特性2 */
.box{
    width:500px;
}
.box-item{
     float:left;
     width:200px;
     height:200px;
     border:2px solid red;
}
/* 特性3 */
.box-item{
     float:right;
     width:200px;
     height:200px;
     border:2px solid red;
}
/*特性4 */
.box-span{
     float:right;
     width:200px;
     height:200px;
     order:2px solid red;
}
/*特性5 */
.box-div{
     float:left;
}

1.3.清除浮动

1.3.1父元素高度塌陷（浮动塌陷）

子元素浮动，父元素没有设置高度，会出现高度撑不开的现象，称之为父元素高度塌陷

演示如下

HTML

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

CSS

.box {
    width:500px;
    border:2px solid black;
}
.box-item {
    float:left;
    width:200px;
    height:200px;
    border:2px solid red;
}

1.3.2.常见的清除浮动方式

1.加额外标签 浮动元素后面加⼀个空标签，设置样式 clear:both;，左右两侧均不允许浮动元素

2.定高法 给浮动元素的父元素设置高度⼤于或等于最高的浮动元素的高度，用于小板块，高度可以写死的部分

3.父元素添加 overflow:hidden 属性 利用 overflow:hidden 清除浮动时，父元素里面不能有定位超出的元素，如果有，超出的部分会被隐藏

4.利用after伪元素清除浮动

注意： 项目中我们常用after伪元素清除浮动，因为它不会额外增加标签，而且不会出现因为用overflow:hidden超出的部分会被隐藏，父元素高度也不用写死，我们只要在页面写⼀次清浮动的代码，在需要清浮动的位置加上 clearfix 类名就可以了

演示如下

第一种

HTML

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="clear"></div>
</div>

CSS

/* 方法一： 浮动元素后⾯加⼀个空标签，设置样式 clear:both; */
.box {
    width:500px;
    border:2px solid black;
}
.box-item {
    float:left;
    width:200px;
    height:200px;
    border:2px solid red;
}
.clear{
    clear:both;
}

第二种

HTML

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

CSS

 /* 方法二：定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度 */
.box {
    width:500px;
    height:500px;
    border:2px solid black;
}
.box-item {
    float:left;
    width:200px;
    height:200px;
    border:2px solid red;
}

第三种

HTML

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

CSS

/* 方法三： 给父级元素添加 overflow: hidden; */
.box {
    width:500px;
    border:2px solid black;
    overflow:hidden;
}
.box-item {
    float:left;
    width:200px;
    height:200px;
    border:2px solid red;
}

第四种

HTML

<div class="box clearfix">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
  <div class="box-item">4</div>
</div>

CSS

/*利用after伪元素清除浮动*/
.box {
    width:500px;
    border:2px solid black;
}
.box-item {
    float:left;
    width:200px;
    height:200px;
    border:2px solid red;
}
.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

1.3.3.清除浮动注意事项

1.同级的元素，要么全部浮动，要么全部不浮动

2.子元素浮动，⽗元素去清除浮动，如果⽗元素也浮动，寻找距离最近的没有浮动的祖先元素去做清除浮动的操作

3.⽗元素有绝对定位的不需要清除浮动