html和css基础--float属性给父元素带来的问题及方案

悠悠 2022-06-12 04:39 260阅读 0赞

**float浮动引发的特殊效果：**

**                     1、父元素中，如果显示不下所有的已浮动子元素，最后一个会换行，有可能会被卡住**

**                     2、元素一旦浮动起来之后，元素宽度将由内容来决定(非指定情况下)**

**                     3、元素一旦浮动起来之后，那么都将变成块级元素，尤其对行内元素影响较大**

**                            块级元素：允许修改尺寸**

**                            行内元素：不能修改尺寸**

**                     4、文本，行内元素，行内块元素 是采用环绕的方式来排列的，不会被浮动元素压在低下，而会巧妙的避开浮动元素**

**清除浮动：属性：clear：none/ left/ right/both**

**@清除浮动所带来的影响：**

**元素一旦浮动起来，会对后面的元素带来位置的影响，如果后面的元素不想被影响的话，可以通过 "清除" 的方式 来解除影响**

**@浮动元素对父元素的影响：**

**由于浮动元素会脱离文档流，所以会导致元素不占据空间.如果一个元素中所有的子元素全部都是浮动的，那么该元素的高度就是 0 ，父元素的高度，是以未浮动元素的高度为准**

**                     解决方案：**

**                            1、直接设置父元素的高度**

**                                   弊端：必须要知道父元素的高度**

**                            2、设置父元素也浮动**

**                                   弊端：对后续元素时有位置影响的**

**                            3、为父元素设置 overflow 取值为 hidden 或 auto**

**                                   弊端：如果有要溢出显示的内容，也一同被隐藏**

**                            4、第一种：在父元素的最后一个子元素位置处，增加 一个空块级元素，并且设置其 clear:both：**

**5.第二种方法：**

**\#d0:after\{**

**            content: "";**

**            display: block;**

**            clear: both;\}**

**              1、最后一个子元素位置处添加一个空的div，如父元素id为\#d0**

**                            为父元素添加 :after(内容生成属性)**

**                  2、空子元素:生成空元素**

**                            content:"";**

**                     3、设置块级元素**

**                            display:block;**

**                     4、清除clear:both**

**                            clear:both;**

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS给元素设置ID属性

给元素设置ID属性每一个 HTML 元素都可以具有 id 属性。 id 属性规定 HTML 元素的唯一的 id。 id 属性是唯一的。虽然浏览器不会强制唯一，但

超、凢脫俗/ 2024年03月29日 16:01/ 0 赞/ 46 阅读

相关 css 不继承父元素_【前端】html+css零基础入门教程（十）

![2a7e06ac71bf301e271ccb0b4309924b.png][] ![743cfc7f0bd991647ba3fe14109157f4.png][] CS

偏执的太偏执、/ 2023年01月10日 10:15/ 0 赞/ 113 阅读

相关关于html文档流，行内元素，块元素，和float属性

关于html文档流，行内元素，块元素，和float属性关于html中的float元素，在开始写静态网站时候，真的是非常的坑人。在讲float属性时，我先说一下，文档

Love The Way You Lie/ 2022年12月04日 01:20/ 0 赞/ 78 阅读

相关 HTML元素及属性（二）

1、元素指的是从开始标签到结束标签的所有代码。 <table> <thead> <tr> <th>开始标签</th> <th align="ce

r囧r小猫/ 2022年07月12日 07:13/ 0 赞/ 167 阅读

相关 HTML元素及属性（二）

1、元素指的是从开始标签到结束标签的所有代码。 <table> <thead> <tr> <th>开始标签</th> <th align="ce

快来打我*/ 2022年07月12日 07:13/ 0 赞/ 187 阅读

相关关于css 的float属性

子元素属性为float 的话，divf 浮动的话（float）是撑不开父元素高度的，float会脱离文档流蓝色div是橙色div父级元素，绿色与蓝色是兄弟元素。出现的这个就

骑猪看日落/ 2022年06月14日 01:06/ 0 赞/ 238 阅读

相关 html和css基础--float属性给父元素带来的问题及方案

float浮动引发的特殊效果： 1、父元素中，如果显示不下所有的已浮动子元素，最后一个会换行，有可能会被卡住

悠悠/ 2022年06月12日 04:39/ 0 赞/ 261 阅读

相关 HTML - 元素/标签和属性基础

http://[blog.csdn.net/pipisorry/article/details/78928313][blog.csdn.net_pipisorry_articl

缺乏、安全感/ 2022年06月02日 01:24/ 0 赞/ 246 阅读

相关 float浮动后，父级元素高度塌陷和遮盖问题

当子元素不浮动的时候，父元素的高度是由子元素撑起来的。子元素A和B是两个div，独占一行效果如图： ![1609148-2019062

港控/mmm°/ 2021年11月29日 12:24/ 0 赞/ 246 阅读

相关 CSS float 浮动属性

本篇主要介绍`float`属性：定义元素朝哪个方向浮动。目录 1. 页面布局方式：介绍文档流、浮动层以及`float`属性。 2. `float:left` ：介

淩亂°似流年/ 2021年07月04日 12:31/ 0 赞/ 500 阅读