float浮动

最新推荐文章于 2023-07-02 20:01:50 发布

zerobaek

最新推荐文章于 2023-07-02 20:01:50 发布

阅读量426

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/zerobaek/article/details/78131457

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

float浮动：

带有float浮动的元素会潜移默化的变成块状元素

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它

布局，也就是没有拖出文本流。

浮动的副作用：

使得元素脱离了标准流

浮动的元素不占原空间

父元素塌陷及其他元素异位

浮动副作用的解决：

1.手动给父元素添加高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: 32px;
            border: 1px solid #000;
            
        }
        
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>                
    </div>
</body>
</html>

2.通过clear清除内部和外部浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
        }
        
        .test{
            width: 100px;
            height: 30px;
            float: left;
            background: red;
            border: 1px solid #FFF;
        }
        
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
       <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
       <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>                
        <div class="clear"></div>
    </div>
</body>
</html>

3.给父元素添加overflow属性并结合zoom：1使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            overflow: hidden;/*处理溢出问题，弊端导致元素被截断*/
            zoom:1;/*ie专用属性，使父元素拥有高度*/
        }
        
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
</body>
</html>

4.给父元素添加浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            float: left;
        }
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
        
        .bro{
            width: 100px;
            height: 100px;
            background: blue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>

zerobaek

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float浮动

float浮动：带有float浮动的元素会潜移默化的变成块状元素浮动的副作用：使得元素脱离了标准流浮动的元素不占原空间父元素塌陷及其他元素异位浮动副作用的解决：1.手动给父元素添加高度 float .per{ width: 500px; heigh
复制链接

扫一扫