【摘要】 css浮动考必过小编为大家整理了关于css浮动的信息，希望可以帮助到大家！
css浮动
标签：左右 ali 使用 lock css play 清除 缺点 超出
1、浮动
1、标准流（文档流）：元素按部就班按照自身的特性排列
2、浮动定义：元素会脱离标准普通流的控制，移动到指定位置的过程
3、使用：
(1) 左浮动：float：left
(2) 右浮动：float：right
4、结论
(1) 浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边
(2) 浮动后的两个块状元素会在同一行显示
(3) 浮动后的元素不占有原来的位置
(4) 浮动后的元素不会超出父元素的范围
(5) 浮动后的元素自动的转化为行内块元素，浮动后的元素不超过父元素的内边距
2、清除浮动
1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响
2、为什么要清除浮动？
① 浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的
② 与浮动元素同级的非浮动元素会跟随其后
③ 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
3、如何清除浮动？
① 额外标签法：在浮动元素的后边加上标签
1) <p style="clear: left;"></p>
2) 清除左浮动 clear: left
3) 清除右浮动 clear: right
4) 清除左右浮动 clear: both
5) 优点：通俗易懂，书写方便
6) 缺点：添加了额外的标签，结构化差
② overflow属性：在父元素中添加
1) overflow: hidden;
2) overflow: scroll;
3) overflow: auto;
4) 优点：但是代码简洁
5) 缺点： 盒子中多余的内容会被隐藏掉
③ 使用after伪元素清除浮动：给父元素添加
1) .clearfix::after { content: ‘ ‘; display: block; clear: both; }
2) 优点：符合闭合浮动思想 结构语义化正确
3) 缺点：IE6-7不支持:after
④ 双伪元素清除浮动:给父元素添加after以及before伪元素
1) .clearfix::after, .clearfix::before { content: ‘‘;display: table;clear: both; }
2) 优点：代码简洁
3) 缺点：IE6-7不支持:after
css浮动
标签：左右 ali 使用 lock css play 清除 缺点 超出
以上就是css浮动的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！