CSS基础----盒子的浮动
今天我们来学习我们在页面布局中经常会用到的浮动(Float)
这里我们就不得不提页面布局中的三种方式:
1.普通流 2.浮动流 3.定位流
浮动(float)
有很多的页面布局我们利用标准流(按照标签规定好的方式排列)是没法完成的这时候,我们就得用到浮动
浮动最典型的应用就是使多个块元素一行排列显示
格式:选择器 { float: none/left/right ;}
浮动的特性:
1.浮动的元素脱离了标准流(脱标)
2.浮动的元素会一行显示并且元素顶部对齐的
3.浮动的元素具有行内块元素的特性。
注意: 浮动的盒子不会保留原来的位置,任何元素都可以添加浮动,并且元素添加了浮动或会自动带有行内块元素的特性,这样原本的行内元素就可以改变大小等属性
为了约束浮动元素的位置,我们可以先用标准父元素排列上下位置
一个盒子中有许多的小盒子,一个小盒子浮动了,按理说别的小盒子(兄弟元素)也要进行浮动
接下来我们来举个栗子 :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动练习title>
<style>
* {
margin: 0px;
padding: 0px;
}
.center {
margin: 50px auto;
width: 800px;
height: 500px;
background-color: pink;
}
.center-1 {
float: left;
background-color: red;
margin: 10px;
width: 180px;
height: 200px;
}
.center-2 {
float: left;
background-color: red;
width: 180px;
height: 200px;
margin: 10px;
}
.center-3 {
float: left;
background-color: red;
width: 180px;
margin: 10px;
height: 200px;
}
.center-4 {
float: left;
background-color: red;
width: 180px;
margin: 10px;
height: 200px;
}
style>
head>
<body>
<div class="center">
<div class="center-1">内容栏-1div>
<div class="center-2">内容栏-2div>
<div class="center-3">内容栏-3div>
<div class="center-4">内容栏-4div>
div>
body>
清除浮动:
而在我们的实际使用浮动的应用中,浮动的元素会造成脱标,而父元素又没有设置高度,子元素就不会将父元素撑开,从而影响到之后的布局,这时我们就会用到清除浮动
清除浮动的本质:
1.清除浮动的本质其实就是消除浮动元素造成后面的影响
2.如果盒子本身有高度,则不用清除浮动
3.清除浮动后,父元素就会自动检测子元素的高度,父级元素有了高度就不会影响到之后的布局了
清除浮动的方法:
1.额外标签法 在浮动的元素添加一个空的标签 在标签的样式中设置选择器 { clear: left/right/both}(left–清除左侧浮动的影响;right–清除右侧浮动的影响;both–同事清除左右两侧的浮动的影响)
优点:通俗易懂,书写方便
缺点:添加无意义标签,结构化较差
注意:这个添加的新的空标签必须是块级元素
2.给浮动元素的父元素添加overflow属性,属性值为:hidden,auto,scroll
优点:代码简洁
缺点:无法显示出溢出的部分
3.父级元素添加after伪元素,是额外标签法的升级版
优点:没有新增标签,结构简单
缺点:照顾低版本的浏览器
4.父级元素添加双伪元素清除浮动
优点:代码更加的简单