关于浮动float

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于浮动float相关的知识,希望对你有一定的参考价值。

众所周知,浮动模型是一种可视化格式模型。浮动的框可以左右移动(即:float:left;float:right),直到它的外边缘碰到包含框或另一个浮动框的边缘。浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在似的。

技术图片

    .wrapper{
        border:5px solid #000;
        /*height:300px;*/
    }
    ul{
        margin:0;
        padding:0;
        /*height:300px;*/
        border:1px solid #f00;
        /*float:left;*/
    }
    li{
        float:left;
        height:100px;
        list-style:none;
        padding:5px 10px;
    }
    

清除浮动的方法:

要想阻止行框围绕在浮动框的外边,需要对包含这些行框的元素应用clear属性。clear属性的值可以是left、right、both或none,它表示框的哪些边不应该挨着浮动框。在清理元素时,浏览器在元素添加足够的外边距,使元素的顶边缘垂直下降到浮动框下面。

浮动元素脱离了文档流,不影响周围的元素。但是,对元素进行清理实际上为前面的浮动元素留出了垂直空间。

方法一:在浮动的元素后添加一个带有clear属性的块状元素。

    .clear{
        clear:both;
    }
    

技术图片

这会实现我们希望的效果,但是要添加不必要的代码,没有意义的标签代码。

方法二:使用伪类选择器:after

技术图片

方法三:利用overflow:hidden或auto的副作用,会自动地清理抱恨的任何浮动元素。在浮动的父块状元素设置属性overflow:hidden或auto;

技术图片

这是一种有用的元素清理方法,不需要添加额外的标记。这个方法并不适合所有情况,因为设置框的overflow会影响它的表现。更具体地说,这种方法在某些情况下回产生滚动条或者截断内容。

方法四:如果子元素内容固定,可以对父级元素设置合适的高度。

本文转载于:关于浮动float

以上是关于关于浮动float的主要内容,如果未能解决你的问题,请参考以下文章

关于css 浮动的例子

将float标签放在kendoReact DatePicker中

关于浮动与清除浮动

关于block和inline元素的float

关于浮动

Float浮动与clear