浮动
基本概念
浮动元素不再强制那个公式成立。
我觉得浮动可以理解成是东西从底上浮到水面上,但是感觉好像又不太对。沉底的还是会占据一整排的位置(自动调margin-right),float的元素上不去。但是同是浮动元素的就可以并排。
元素脱离文档流之后的特点:世界大同了,不再区分块元素跟行内元素,都变成一种:
1.不再独占一行,后面元素都跟上(不强制约束公式相等)
2.可以设置宽高了,如果不设置的话就是内容撑开的。
3.文字会自动浮在元素的周围(类似杂志排版,文字围绕在图片周围)
W3C导航条练习
获取焦点的时候颜色跟字体一起变,现在还不知道怎么用一个焦点让两个组件一起变,所以把a调大,直接a一块变了。
没发现每块都是不一样的,就直接平均了,其实写死或者用padding制造不一样大小的分隔比较好。
思路:先整理出结构(html)再写css
高度塌陷
高度塌陷是父元素高度为自动需要靠子元素撑开来获取高度时,但是子元素设置成浮动,脱离了文档流,撑不起来,造成的高度塌陷。
BFC
BFC可以理解成是一块独立的区域。父元素设立了BFC的话,父元素里面就是一块独立的区域,里面怎么排版都跟外面文件流无关了,想怎么排怎么排。
形成BFC的一些条件:
3的补充:overflow设置成hidden、auto都可以。
bfc开启之后不会被浮动元素所覆盖,子元素的margin不会传递给父元素,不会让父元素也动了。
例子:overflow设置成hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.outer{
background-color: aqua;
border: 10px red solid;
overflow: hidden;
}
.inner{
background-color: olive;
border: 10px green solid;
height: 100px;
width: 50px;
float: left;
}
.div2{
background-color: olive;
border: 10px green solid;
height: 100px;
width: 50px;
float: left;
}
.div3{
background-color: olive;
border: 10px green solid;
height: 100px;
width: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
<div class="div2">
</div>
</div>
<div class="div3"></div>
</body>
</html>
div3没有设置浮动,divouter设置了float。但是div.outer开启bfc的时候就可以在整个文档流里面占据位置了,但是他本身的面积也是里面的子元素撑开的,挺神奇。
float-root
css的新属性 float-root
https://www.webdesigns.com.tw/css_flow-root.asp
https://www.jb51.net/css/724974.html
只要设置就行,比较好用,设置了就没有高度塌陷了。而且父元素在设置这个float-root之后真的占据了位置,后面的div3没有往上跑。
而根元素,作为页面中所有内容的容器,自身脱离常规流,为整个文档创建了一个块级格式化上下文环境。
clear
::after
这里就是。box1::after就是box1最后一个子元素 box2后面 等同于box3
::after,伪元素本身就是行内元素,要用display:block
### bfc最终版(可以解决高度塌陷&外边距重叠)(不太理解)