Web前端开发笔记-----13.float浮动、position定位
文章目录
一、float浮动
1.float浮动概念和原理
文档流:
文档流是文档中可显示对象在排列时所占的位置。
float特性:
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
取值:
left
right
none
注意点:
1.只会影响后面的元素。
2.内容默认提升半层。(用于图文混排)
3.默认宽根据内容决定。
4.换行排列。
5.主要给块元素添加,但也可以给内联元素添加。
2.清除float浮动
为了消除float浮动对下面布局的影响,这时需要进行清除浮动的操作。
上下排列:clear属性 取值:left right both
嵌套排列:
固定宽高:不推荐,把父容器高度固定死,不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
overflow:hidden,如果有子元素想溢出,那么会受到影响。
display:inline-block,不推荐,父容器会影响到后面的元素。
设置空标签:不推荐,会多添加一个标签。
做法:
<style>
#box1{
width: 200px; border: 1px solid black;}
#box2{
width: 100px; height: 100px;background-color: red; float: left;}
#class{
clear: both;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
<div id="class"></div> //这是一个空标签
</div>
aaaaaaa
after伪类:推荐,是空标