关于浮动float

ivydom 发布于2019-08-01 15:14 / 3023人阅读

摘要：浮动的框可以左右移动即，直到它的外边缘碰到包含框或另一个浮动框的边缘。属性的值可以是或，它表示框的哪些边不应该挨着浮动框。在清理元素时，浏览器在元素添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。

众所周知，浮动模型是一种可视化格式模型。浮动的框可以左右移动（即：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会影响它的表现。更具体地说，这种方法在某些情况下回产生滚动条或者截断内容。

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

GPU云服务器云服务器 Floats Floating float float:left

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49845.html

关于浮动float

摘要：浮动的框可以左右移动即，直到它的外边缘碰到包含框或另一个浮动框的边缘。属性的值可以是或，它表示框的哪些边不应该挨着浮动框。在清理元素时，浏览器在元素添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。众所周知，浮动模型是一种可视化格式模型。浮动的框可以左右移动（即：float：left;float:right），直到它的外边缘碰到包含框或另一个浮动框的边缘。浮动框不在文档的普通流中...

Noodles 2019-08-30 12:59 评论0 收藏0
Css清除浮动的方法总结

摘要：网页布局中经常会用到浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动的几种方法。网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动的几种方法。清除浮动影响的几种方法...

LeanCloud 2019-08-30 11:20 评论0 收藏0
重塑你的CSS世界观——浮动魔鬼float

摘要：而在文档流中，如果浮动元素和跟随元素都是元素，它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流，如果父元素没有指定高度或者其他元素撑起，也就出现了所谓的浮动元素的父元素高度塌陷。为什么要写《重塑你的CSS世界观》系列文章由于从工作到现在，我的主要工作都是写JavaScript，几乎没怎么碰CSS，通常都是别人写好界面，然后我来开发JavaScript逻辑代码，这导致了严重...

joyqi 2019-08-30 15:55 评论0 收藏0
重塑你的CSS世界观——浮动魔鬼float

摘要：而在文档流中，如果浮动元素和跟随元素都是元素，它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流，如果父元素没有指定高度或者其他元素撑起，也就出现了所谓的浮动元素的父元素高度塌陷。为什么要写《重塑你的CSS世界观》系列文章由于从工作到现在，我的主要工作都是写JavaScript，几乎没怎么碰CSS，通常都是别人写好界面，然后我来开发JavaScript逻辑代码，这导致了严重...

frank_fun 2019-08-02 14:24 评论0 收藏0
关于css兼容性问题及一些常见问题汇总

摘要：解决办法添加复制内容到剪贴板一行右侧第一个元素有双边距一行左侧第一个元素有双边距在，下，自身没浮动，但是的内容有浮动，下边就会产生一个间隙解决办法给加浮动给加注意当下最小高度问题，和的间隙问题共存的时候，给加浮动才能解决。目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。 1.圆盘时钟有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下...

seanlook 2019-04-23 11:43 评论0 收藏0