1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动。 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素。内联标签设置浮动,就变成了块级标签。 1.3 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 1.4 三种取值:left向左浮动;right向右浮动;none默认值,不浮动 详情:https://www.w3school.com.cn/css/css_positioning_floating.asp 示例: <body> <div class="c1"></div> <div class="c2"></div> </body> CSS: *{margin:0px;} /*浏览器默认margin是8px,设置为0px,让背景色布满页面*/ .c1{ width:200px; height:500px; background-color:red; float:left } .c2{ width:200px; height:500px; background-color:green; float:left } 上面两元素都是向左浮动,效果是并排在一起。
2. clear 清除浮动 1. clear属性规定元素的哪一侧不允许其他浮动元素。clear属性只会对自身起作用,而不会影响其他元素。 值 描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 div{clear:left} 2. 清除浮动 2.1 清除浮动的副作用(父标签塌陷问题) 2.2 主要有三种方式: 固定高度 伪元素清除法 overflow:hidden 2.3 伪元素清除法(使用较多): .clearfix:after { content: ""; display: block; clear: both; } 3. overflow溢出属性 值 描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 overflow(水平和垂直均设置) overflow-x(设置水平方向) overflow-y(设置垂直方向 示例1:圆头头像 <body> <div> <img src="1.jpg" alt=""> </div> </body> div{ width:200px; height:100px; border:1px red solid; border-radius:30%; /*边框四边圆角,如果边框长宽一样,100%就是圆形*/ overflow:hidden; /*把边框外面的图片边角隐藏了,不然就挡住了边框*/ } img{ max-width:100%; /*图片最大宽度是父类标签边框的100%,不然就会溢出*/ }
示例2:滚动条 <div> 海燕 在苍茫的大海上,狂风卷积着乌云,在乌云和大海之间,海燕就像一道闪电,高傲的飞翔 </div> div{ width:100px; height:100px; border:1px red solid; overflow:auto; }