float属性

最新推荐文章于 2021-06-19 10:33:28 发布

oHayHay

最新推荐文章于 2021-06-19 10:33:28 发布

阅读量414

点赞数

分类专栏： css 文章标签：盒子模型 float+布局

本文链接：https://blog.csdn.net/oHayHay/article/details/51901919

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>float属性</title>
    <style type="text/css">
    .box1{height: 70px;background-color: red; float: left;}
    .box2{height: 70px;background-color: green;float: left;}
    /*p{clear: both;}*/
    p{width: 100%;overflow: hidden;}
    </style>
</head>
<body>
<div class="box1">dsvcxvxc</div>
<div class="box2">fdsgdg</div>
<p>gfsvdfgvsdfgvdsfgv</p>
</body>
</html>
<!-- 使用浮动可使块级元素横向布局，float：left在父容器（父包裹层）中左浮动 。
元素设置浮动后，会对相邻元素产生影响，特指紧邻其后的元素

清除浮动的方法
法一、clear：both或者clear:left或clear:right 清除左侧或者右侧浮动
法二、同时设置width：100%（或固定宽度）+overflow:hidden;

//混合布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>float属性</title>
    <style type="text/css">
    .box1{height: 70px;background-color: red; float: left;}
    .box2{height: 70px;background-color: green;float: left;}
    /*p{clear: both;}*/
    p{width: 100%;overflow: hidden;}
    </style>
</head>
<body>
<div class="box1">dsvcxvxc</div>
<div class="box2">fdsgdg</div>
<p>gfsvdfgvsdfgvdsfgv</p>
</body>
</html>
<!-- 使用浮动可使块级元素横向布局，float：left在父容器（父包裹层）中左浮动 。
元素设置浮动后，会对相邻元素产生影响，特指紧邻其后的元素

清除浮动的方法
法一、clear：both或者clear:left或clear:right 清除左侧或者右侧浮动
法二、同时设置width：100%（或固定宽度）+overflow:hidden;

oHayHay

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head> <meta charset="utf-8"></meta> <title>float属性</title> <style type="text/css"> .box1{height: 70px;background-color: red; float: left;} .box2{height: 70px
复制链接

扫一扫

专栏目录