css选择器&浮动

css选择器

选择器使用的原因

要使用css实现对页面元素实现 一对一 一对多 多对一 的控制

基础选择器

1. 通配符选择器 *
2. 标签选择器 ：
3. 类选择器
4. id选择器
5. 群组选择器

层次选择器

6. S1 > S2 :父子选择器
7. S1 S2： 后代选择器
8. S1+S2 兄弟选择器

伪类选择器

link visited hover active

样式表的优先级

同一个属性：
important > 行内样式 > 内部style中的样式 > 引入的样式
采用的“就近原则”（添加important样式除外 ）如果同时添加important还是采用“就近原则”

浮动属性

浮动的作用：

1. 定义页面中其他文本如何该元素显示
2. 让竖着的元素横着来（可以并排显示）— 浮动脱离文档流

浮动属性

div {
 float: right // 右侧浮动
}
p{
 float: left// 左侧浮动
}
h1{
 float: none// 不浮动
}

清除浮动

清除浮动只是改变元素的排列方式，该元素还是漂浮这个，不占据文档流

为什么要清除浮动

是因为使用float的元素，都会存在高度塌陷，这个时候，下面的元素就会顶上来

clear：none 允许有浮动元素
clear：right 不允许右边有浮动元素
clear：left 不允许左边有浮动元素
clear：both 不允许有浮动对象

使用场景

举例： 希望有两个div元素并排展示，但是下面的元素没有顶上来，还是原位置上 这个时候就可以使用清除浮动

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="nextDiv"></div>

div {
width: 200px;
height: 200px;
}
.one {
float: left;
background-color: red
}
.two {
float: left;
background-color: yellow
}
.nextDiv{
width: 500px;
height: 300px;
backround-color: black
}

解决高度塌陷

1. 添加高度
2. 清浮动方案 clear clear 是添加给后面的兄弟
3. 当前浮动元素后面添加一个div
4. 给父元素添加一个 overflow: hidden

添加高度

.container {
height: 200px
}

清除浮动

.nextDiv {
 clear: left
}

添加一个div

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div style="clear: left"></div>
</div>
<div class="nextDiv"></div>

添加overflow

.container {
overflow:hidden
// overflow:hidden 引发了bfc（块级作用域）他能够实现自动计算高度
}