解决设置float样式后父级元素不适应问题

最新推荐文章于 2021-12-17 11:13:38 发布

Marvel__Dead

最新推荐文章于 2021-12-17 11:13:38 发布

阅读量1.8k

点赞数 1

分类专栏： CSS3 文章标签： CSS3 float布局

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/54646506

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这是没有解决之前的样式:

未设置样式之前

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{margin:0;padding:0;}
    .box{border:1px solid #23D127;width:520px;margin:100px auto;}
    .box .pageBtn{width:80px;height:40px;border:1px solid #0747C8;text-align:center;font:bold 14px/40px "宋体";color:#0747C8;}
    .box .lastBtn{float:left;}
    .box .nextBtn{float:right;}
</style>
</head>
<body>
<div class="box">
    <div class="pageBtn lastBtn">上一页</div>
    <div class="pageBtn nextBtn">下一页</div>
</div>
</body>
</html>

解决之后:

解决样式之后

第一种解决办法(这是最好的办法，没有任何副作用):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{margin:0;padding:0;}
    .box{border:1px solid #23D127;width:520px;margin:100px auto;}
    .box .pageBtn{width:80px;height:40px;border:1px solid #0747C8;text-align:center;font:bold 14px/40px "宋体";color:#0747C8;}
    .box .lastBtn{float:left;}
    .box .nextBtn{float:right;}
    .box:after{content:"";clear:both;display:block;}//after和content是结合使用的缺一不可，意思是在.box的子元素最后面添加一个content内容，并且设置display为block(目的是想占width为100%)，清除float左右浮动。
</style>
</head>
<body>
<div class="box">
    <div class="pageBtn lastBtn">上一页</div>
    <div class="pageBtn nextBtn">下一页</div>
</div>
</body>
</html>

第二种解决办法(听说这个方式有不好的地方，但是我用了很久都没发现):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{margin:0;padding:0;}
    .box{border:1px solid #23D127;width:520px;margin:100px auto;}
    .box .pageBtn{width:80px;height:40px;border:1px solid #0747C8;text-align:center;font:bold 14px/40px "宋体";color:#0747C8;}
    .box .lastBtn{float:left;}
    .box .nextBtn{float:right;}
    .box{overflow:hidden;}//添加overflow。
</style>
</head>
<body>
<div class="box">
    <div class="pageBtn lastBtn">上一页</div>
    <div class="pageBtn nextBtn">下一页</div>
</div>
</body>
</html>

奇怪的是我给box添加了另外一个子元素，设置display为absolute或fixed这两个绝对定位，溢出后不但不扩大box大小，反而对box的大小没有影响。
我的猜测是绝对定位不仅是脱离文档流，还有就是对父节点没有依赖，算是完全脱离文档流。而float并不是完全脱离文档流。

然而对其设置positon:relative时超过了父节点的限定范围时会起到隐藏效果。

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{margin:0;padding:0;}
    .box{border:1px solid #23D127;width:520px;margin:100px auto;}
    .box .pageBtn{width:80px;height:40px;border:1px solid #0747C8;text-align:center;font:bold 14px/40px "宋体";color:#0747C8;}
    .box .lastBtn{float:left;}
    .box .nextBtn{float:right;}
    .box{overflow:hidden;}
    .mark{width:100px;height:100px;background:#A7A6A6;position:relative;top:71px;}
    .tian{height:3000px;}
</style>
</head>
<body>
<div class="box">
    <div class="pageBtn lastBtn">上一页</div>
    <div class="pageBtn nextBtn">下一页</div>
    <div class="mark"></div>
</div>
<div class="tian"></div>
</body>
</html>

最后:解决这个问题的方法当然还有很多，因为兼容性不好，我就不一一列举了。

Marvel__Dead

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
解决设置float样式后父级元素不适应问题

这是没有解决之前的样式:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> *{margin:0;padding:0;} .box{border:1px solid #23D127;width:520px;margin:100px auto;} .box .page
复制链接

扫一扫