Tips for clearing floats between css hierarchical elements-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Tips for clearing floats between css hierarchical elements

无忌哥哥

Jun 29, 2018 am 09:35 AM

如果让父元素包住浮动的子元素?主要有以下几种方法:

1:让父元素也一起浮动:经测试该方法可行,而且四周全部包住,非常严实.但是如果当前的子元素有多个父级的话,

那么每个父级元素都要设置浮动,甚至要一直写到

,所以该方法pass。

2.给父元素设置溢出隐藏属性:同样也可实现要求,但这种方法有很多兼容性问题,大家课后可多打开几个浏览器测试

3.给当前的父元素中添加一个空的块元素,这个新元素只做一件事,清除它周围的浮动元素

经测试也能实现要求,这种方法是最简单最直观,而且没有任何兼容问题,但却有一个致命的问题,

那就是给当前的子元素列表中添加了一个无用的元素,当我们用js和php等脚本语言进行数据遍历的时候会非常麻烦

因为这个元素并不是我们需要的,必须单独的进行处理,那么有没有一种二全其美的方案:即保证兼容性,又不用添加新元素呢?

有,用我们之前学过的伪元素来解决。

4. 给父元素添加:after伪类,在后面添加一个空元素,直接设置它的属性即可;

<html>
<head>
<meta charset="UTF-8">
<title>7.层次元素之间的清除浮动的技巧</title>
<style type="text/css">
.parent {
background-color: lightskyblue;
border: 2px solid red;
/*让父元素一起浮动,让它包住浮动的子元素*/
/*float:left;*/
/*给父元素设置内容溢出隐藏功能*/
/*overflow: hidden;*/
}
.parent:after {
/*1.添加一个空元素*/
content: &#39;&#39;;
/*2.默认为行内元素,所以要转为块元素*/
display: block; 
/*3.直接清除二边的浮动*/
clear: both;
/*如果ie下显示有问题,可以加上*/
/*z-index: 1;*/
/*可能你看过有的地方是这样写的:*/
/*添加一个空格*/
/*content: &#39;\0020&#39;;*/
/*然后让这个空格高度为0,这样就根本不会显示出来*/
/*height: 0;*/
}
.child {
width: 200px;
height: 200px;
background-color: lightgreen;
/*设置提示文本的水平垂直居中*/
text-align: center;
line-height: 200px;
/*当前父元素没有声明宽高,它是由子元素的宽高撑起来的*/
/*下面我们将子元素进行浮动,你将会看到非常有意思的事情发生*/
float:left;
/*结果你会发现,子元素浮动之后,脱离了文档流,它与原来的父级元素就没有了关联,
所以父级直接压缩了,无法再包住子元素*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div>
<div>子元素</div>
<!-- <div></div> -->
</div>
</body>
</html>

The above is the detailed content of Tips for clearing floats between css hierarchical elements. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties