Does Width Property Affects Clear

Does width property affects clear?

To start, the use of clear here is useless simply because you are clearing the right and you have used float:left. So you will have the same output if you remove the clear.

To better understand what is happening, let's make the float element a bit transparent:

.container {

  border: solid thin #ccc;

}

.left-segment {

  float: left;

  background-color: #8FC9FF;

  height: 200px;

  width: 200px;

  opacity: 0.5

}

.text-clear {

  background-color: red;

  width: 200px;

  margin: 0; /*let's remove margin to avoid confusion*/

}

<div class='container'>

  <div class='left-segment'>I am LEFT DIV</div>

  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>

</div>

Override and reset CSS style: auto or none don't work

I believe the reason why the first set of properties will not work is because there is no auto value for display, so that property should be ignored. In that case, inline-table will still take effect, and as width do not apply to inline elements, that set of properties will not do anything.

The second set of properties will simply hide the table, as that's what display: none is for.

Try resetting it to table instead:

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

Edit: min-width defaults to 0, not auto

weird behavior of clear property

1. We often read that a float is not in the flow. One side-effect of this behavior is that floated elements do not affect the height of their parent. Your observation that [floated elements] stay outside the container is somewhat incorrect; floated elements remain inside the container but the container's height is 0 so these elements render outside.

2. The clear property indicates that no floated element is allowed on the left, right or both sides of the cleared element. When you add a cleared element after floated elements, it is pushed below all left and/or right floated elements that appear before it to satisfy the condition. (Remember: a left-floated element allows content to flow along its right side; a right-floated element allows content to flow around its left edge; cleared content by-passes this feature).

A cleared element is still an in-flow element, when it is pushed down will will stretch the parent element along with it.

Effect of overflow and clear styles with floats

1. Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.

   It may not be directly affecting its position, but it would still have affected it anyway, because in the absence of any clearance, floats aren't normally restricted in how they affect the rest of the normal flow layout even once they are taken out of it, not even by different parent elements such as your .b content element with the left margin in this case. The only real restriction is that floating elements may only affect elements that come after them in document tree order, i.e. elements that are following (not preceding) siblings, as well as their descendants.

   The content that's just above the element within your content column isn't tall enough to push it beneath the floated element. If you remove that declaration, you would see that both .c elements become positioned next to their respective floats as well.

   When you add clear, what happens is that it forces the clearing element to be positioned beneath the float regardless of where it ends up horizontally.

2. Why overflow:auto on the parent element fixes the issue.

   This is because any block boxes with overflow other than visible generate block formatting contexts. A property of a block formatting context is that floating boxes outside it can never interact with any boxes inside it, and vice versa.

   Once you cause the content element to establish its own block formatting context, your floating element is no longer able to affect any elements inside the content element (see the section on the float property), and the clearing element inside it is no longer able to clear any floats that are outside the content element (see the clear property).

Does height and width not apply to span?

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

Width ignored on flexbox items

Remove the width on .container > div and use flex: auto; on #main: fiddle

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

---

Related Topics