css float_html/css_WEB-ITnose
Jun 24, 2016 am 11:38 AM
我在项目的实践中遇到了这样的一个问题
<div class="main"> <p>aaaa</p> <p>bbbb</p> </div>
* { padding: 0; margin:0;}p { padding-left: 30px;}.main { background: green;}
上面的效果是这样的
我想让父元素div 里面的两个p元素通过float到同一行
我添加了这样一句话
.mian p { float:right; }
我理所应当 异想天开的以为会是这样的结果
结果是这个样子的
为了更好的说明这个问题,也是我刚在疑惑的地方 我又将页面父div下面增加了一个div
<div class="main"> <p>aaaa</p> <p style="clear:right">bbbb</p> </div> <div>cccc</div>
也就是我总体的想实现是这样的一个布局
结果我通过上面的那一点css 是这样的一个效果
我在实际遇到这个问题是在上面那个父div并没有设置背景色 我通过审查元素看到那个div的高度变成0了 我也不是很明白为什么下面的div会挤上去 应为两个div是块级元素,不会向上浮动的
原来float会造成一个塌陷的问题 当我们没有为父元素设置高度的时候 ,并且父元素只包含浮动元素的时候 就会产生塌陷这种问题 就是父元素的高度变成0
通过查找资料和学习我发现
可以为父元素设置overflow:hidden
这样的情况下父元素就会自动扩展来包含他里面的浮动元素了,并且下面的div也自动的到下面去了
其实如果我们可以通过简单的clear设置来消除float的设置
clear:both 清除两边的浮动
clear:right 清除右边的浮动
clear:left 清除左边的浮动
例如上面的问题 我可以下面那个div 也就是并没有设置float的元素设置clear:both 这样他就不会飘上去了
上面的我并没有为上面的div设置overflow:hidden 只是让下面那个div clear:both
还有一种方法是在清除浮动元素之后通过css伪类:after添加一个不可见的内容 在它的上面clear:both
上面加黑的就是两种清除浮动的方式
也解决了我的问题 拿来分享出来

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was ist der Zweck des & lt; Meter & gt; Element?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Was ist der Zweck des & lt; datalist & gt; Element?

Was ist der Zweck des & lt; Fortschritts & gt; Element?
