Re: .clearfix

On Fri, Oct 18, 2013 at 11:52 AM, Kang-Hao (Kenny) Lu
<kanghaol@oupeng.com> wrote:
> (2013/10/19 2:00), Tab Atkins Jr. wrote:
>> On Fri, Oct 18, 2013 at 9:31 AM, Kang-Hao (Kenny) Lu
>> <kanghaol@oupeng.com> wrote:
>>> Given Alan's compliant, that's start a new thread.
>>>
>>> (2013/10/18 23:47), Tab Atkins Jr. wrote:
>>>> Getting a container element to contain its floats has been addressed
>>>> directly in the Sizing spec, though it hasn't gotten implementation
>>>> yet.  You can set "min-height: contain-floats;" to make it work:
>>>> <http://dev.w3.org/csswg/css-sizing/#the-contain-floats-value>.
>>>
>>> Unless I am missing something, "getting a container element to contain
>>> its floats" is not the requirement, the requirement is "getting the
>>> parent of the targeted element to contain its floats". Note that the
>>> targeted element is different.
>>
>> Why is this important?  Why can't you just target the parent directly?
>
> Since I don't have much Web development expereince, I can't quite anwser
> that. My guess is that for new 'float' users, it's not easy to think of
> a 'float'ed element as something out of the normal flow. For example,
> [1] mentions this question
>
>   If I understand it right clear float is automatic in most modern
>   browsers right?
>
> from a CSS newbie. In other words, it might be more natural to have a
> mode in the 'float' property that doesn't exclude the element form the
> normal flow, say, something like
>
>   float: left in-flow;

Floats are intrinsically not in-flow.  What we really need is to
continue the implementation of Flexbox and Grid and similar things,
which'll make most of the use-cases for floats and clearfixing go
away.

> But I really don't know. Bruno, in
>
> (2013/10/18 16:38), Bruno Racineux wrote:
>> I believe (or rather assume) that Flexbox does fix the problem 'within
>> the flex layout', but that does not give a native clearfix property
>> outside of the Flex scope. The need to clearfix can apply to other
>> situations.
>
> , what are those situations and are they fixed by 'min-height:
> contain-floats'?
>
> Scotts in [1] says
>
>   That ('min-height: contain-floats') basically solves the clearing
>   problem, as long as you have a parent wrapper. A nice note for the
>   future.
>
> . I wonder
>
>   1) how much chance do you get a wrapper?

The definition of clearfixing is making a wrapper grow to contain the
float.  If you're trying to "clearfix", you have a container in mind
that you're trying to clear, which can accept styling.

>   2) is that the case that adding a dummy class="contain-floats" might
>      be the problem (say, you can't change HTML)?

The types of things that are "significant containers" that need to
grow in these cases are the kinds of things that are generally easy to
target in CSS, as they probably have other reasonable classes on
themselves.

~TJ

Received on Friday, 18 October 2013 19:09:35 UTC