float

最新推荐文章于 2022-08-14 16:57:56 发布

蔡蔡动起来

最新推荐文章于 2022-08-14 16:57:56 发布

阅读量287

点赞数

分类专栏： css 文章标签： float clear

本文链接：https://blog.csdn.net/weixin_40512519/article/details/81269152

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

float的四个参数：

float:left
float:right
float:none
float:inherit 继承浮动

float:left各元素按顺序排列 float:right各元素按倒序排列

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .test{
        width: 100px;
        height: 100px;
        background: red;
        margin-right: 10px;
        float: right;
    }

</style>
<body>

<div class="test">1</div>
<div class="test">2</div>

</body>

float: right;

float属性实现文本环绕效果：

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .per{width: 400px;
        height: 400px;
        border: 1px solid #ccc;

    }
    img{
        
        width: 200px;
        height: 100px;
    }

</style>
<body>

<div class="per">
    <img src="../img/dog.jpg" alt=""/>
    杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时....
</div>

在img样式下，加float:left;

在img样式下，加float:right;

span是内联不能设置高宽，设置高宽则在浏览器中其内容显示不出来，如果加上浮动，内联就会变为块级样式。

解决浮动副作用：

手动给父元素添加高度
通过clear清除内部和外部浮动
给父元素添加overfloat属性并结合zoom:1使用
给父元素添加浮动

1.给.test添加浮动后，父元素的高度变为0，此时手动给父元素添加高度。

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .per{width: 500px;
        /*height: auto;*/
        height: 32px;
        border: 1px solid #000;

    }
    .test{
        width: 100px;
        height: 30px ;
        background: red;
        border: 1px solid #ffffff;
        float: left;
    }

</style>
<body>

<div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>

2.clear属性： clear:none|left|right|both

3.overflow和zoom组合有弊端：溢出的部分被截取了。

.per{width: 500px;
     height: auto;
     border: 1px solid #000;
     overflow: hidden;/*处理溢出问题*/
     zoom:1;}

4.给父元素添加浮动，会影响其他元素。这时就要给其他元素设置clear属性。

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .per{width: 500px;
        height: auto;
        border: 1px solid #000;
        float: left;

    }
    .test{
        width: 100px;
        height: 30px ;
        background: red;
        border: 1px solid #ffffff;
        float: left;
    }
    .bro{
        width: 100px;
        height: 100px;
        background: blue;
        clear: both;
    }

</style>
<body>

<div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>
<div class="bro"></div>

这里，建议还是使用第二种方法。

蔡蔡动起来

关注

0
点赞
踩
0

收藏

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

float的四个参数：float:left float:right float:none float:inherit 继承浮动float:left各元素按顺序排列 float:right各元素按倒序排列&lt;style type="text/css"&gt; *{ padding: 0; margin: 0; } .t...
复制链接

扫一扫

专栏目录