深入理解CSS3浮动和清除浮动

最新推荐文章于 2024-07-26 08:00:00 发布

Acesaces

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量139

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44292431/article/details/104433333

版权

float浮动

了解浮动前要知道什么是文档流	：文档流是文档中可显示对象在排列时所占用的位置。

在没有浮动时，页面上的所有block元素会依次的上下排列，此时如果向让元素左右排列救需要用到浮动float    

float特性：加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
取值：left 沿着父容器靠左排列。
     right 沿着父容器靠右排列。
     none 没有浮动

浮动前

float:left 之后

<style>
#red{width: 100px;height: 100px;background: red; float: left;}
#blue{width: 200px;height: 200px;background: blue;float:left;}
</style>
<body>
    <div id="red"></div>
    <div id="blue"></div>
    <p>逆战班逆战班逆战班逆战班逆战班</p>
</body>

在这里插入图片描述

        这里我们注意到在受浮动影响后面的内联元素会排在浮动元素的后面，由此可总结几点

float注意点	
    只会影响后面的元素。
    内容默认提升半层。
    默认宽根据内容决定。
    换行排列，当容器放不下这些浮动元素的时候，就会换行排列  ( 尽量让浮动的元素高度是统一 )
    主要给块元素添加，但也可以给内联元素添加。

想让其他元素不受到浮动影响救需要清除浮动

清除浮动：
    1. 解决上下排列的情况：
        利用clear属性清除float浮动
            clear : left | right | both(比较常用的，左右浮动都清除)	
    2. 解决嵌套的情况：
        固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。
        父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
        overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
        display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。

p{clear: both;}

在这里插入图片描述

Acesaces

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入理解CSS3浮动和清除浮动

float浮动了解浮动前要知道什么是文档流：文档流是文档中可显示对象在排列时所占用的位置。在没有浮动时，页面上的所有block元素会依次的上下排列，此时如果向让元素左右排列救需要用到浮动float float特性：加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。取值：left 沿着父容器靠左排列。 right...
复制链接

扫一扫