css - html中使用float属性,父元素高度会变为0,怎么解决?-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

方案一

在浮动元素下面加一个清除浮动的元素:p{clear:both}

html

<p class="clearfix">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>
</p

css

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

方案二

将父元素也设置为浮动的

html

<p style="float: left;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>
</p>

方案三

为父元素显式的设置高度，不推荐

html

<p style="height: 400px;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>        
</p>

方案四

为父元素加入overflow:hidded属性或者overflow:auto属性

html

<p style="overflow: hidden;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>        
</p>

上面四种方案，方案一比较靠谱，兼容性最强

赞 +0

添加回复

PHPz2017-04-17 13:33:14 8楼

伪元素设置{content:"";display:table;}
空p设置 {clear:both}
和父元素： {overflow:auto}
我只知道这几个。

至于你的overflow:hidden; 是你写错了啊？

赞 +0

添加回复

PHPz2017-04-17 13:33:14 7楼

overflow hidden是超出的内容隐藏掉
我常用的就是你说的clear both 没什么问题啊
或者你高兴的话直接把父节点也float起来也能解决但是不建议这么做这样会导致全部元素都浮动了容易出更多问题

赞 +0

添加回复

PHP中文网2017-04-17 13:33:14 6楼

只知道三种。好像没什么原因吧。记住就好

赞 +0

添加回复

ringa_lee2017-04-17 13:33:14 5楼

还是clearfix大法最好

赞 +0

添加回复

黄舟2017-04-17 13:33:14 4楼

Clear Float总结得不错，应该能解答你的疑惑。

赞 +0

添加回复

高洛峰2017-04-17 13:33:14 3楼

大家说得都是对的，我来补充一下，基本所有css框架都有一个类叫clearfix，只需要在这个float的p上加上这个类名就可以了。

赞 +0

添加回复

PHP中文网2017-04-17 13:33:14 2楼

.clearfix:after{ clear:both; display:block; content:"";}
.clearfix{ zoom:1;}

在css里面加上这两行代码，给浮动元素的父级加上clearfix这个class就行了（元素加浮动，父级清除浮动）

赞 +0

添加回复

巴扎黑2017-04-17 13:33:14 1楼

方法网上都有可以自己慢慢试真的！还是自己通过尝试来看区别比较直观！比如用给父元素加高度的方法，再去试试给浮动元素用margin是否和正常文档流一样！反正个人觉得还是给父元素加after伪类比较顺！

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>