可以让元素同行显示,排列不下自动换行
语法:
float:left | right |none;
特点:
注意:
非浮动元素会占用浮动元素原来的位置
非浮动元素里面的文本会被浮动元素挤出来
实现图文混排
<style>
img{
float: left;
width: 60px;
}
style>
<img src="img/img-8.jpg" alt="">
<p>
特点: 浮动元素可以同行显示,排列不下会自动换行,不存在兼容问题 浮动元素会脱离文档流,在标准文档流之上原来的空间不存在行内元素设置浮动后,支持宽高注意:只有设置了浮动的元素,才可以同行显示多个元素同时浮动,第一个浮动元素找父盒子的边界,后面的浮动元素找前面浮动元素的边界块级元素设置浮动后,如果不设置width,默认是auto,宽度是由内容决定
p>
子元素浮动,父元素高度塌陷
通过clear属性来清除浮动,清除浮动元素对非浮动元素的影响
语法:
clear:left | right |both;
给受影响的元素添加 clear属性
使用
进浮动元素和非浮动元素隔开
使用空白的div添加clear样式将浮动元素和非浮动元素隔开
<div style="clear:both;"> div>
给父元素添加伪元素选择器来清除浮动(推荐使用)
.clearfix::after{
content: "";
clear: both;
display: block;
}
注意:overflow:hidden可以解决子元素浮动,父元素高度塌陷的问题,是取消浮动的影响,借助BFC容器的特点,这个容器里面的浮动元素会参与父盒子的高度计算。
说明:本笔记主要根据网络视频教程整理,看再多也没大用,最重要的是多动手啊多动手~~