Is it unnecessary to use both "width: inherit" and "float: none

Question

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is:

@media screen and (max-width: 480px){
    .class1{
        width: inherit;
        float: none;
        }
    .class2{
        width: inherit;
        float: none;
        }

for two the two classes which were set to float: left in a parent container. I am just wondering: is this code redundant? If the width is set to inherit, there is no way for any other element to float around it, or do I miss anything?

Edit Thanks to @BoltClock here are some examples where there is a difference

If the children are in a block context, it does not float: none; is not necessary:

http://jsfiddle.net/rCwnx/2/

In an inline context float: left looks broken:

http://jsfiddle.net/TkJA7/

while float: none provides the desired result

http://jsfiddle.net/Z5RHX/

html css responsive-design

Answer 1

Answer №1

Whether or not it's redundant varies based on how the floats and containers are laid out.

If the parent elements do not create a block formatting context, other elements outside the parents may still be impacted by these floats if they continue to float, despite inheriting the full width from their parent.

Floating an element within the parent disrupts the normal flow, potentially leading to unwanted effects for other elements inside the parent. For instance, siblings following in the normal flow might position themselves as though the floating element wasn't there, with their text starting just below it.

Answer 2

Whether or not it's redundant varies based on how the floats and containers are laid out.

If the parent elements do not create a block formatting context, other elements outside the parents may still be impacted by these floats if they continue to float, despite inheriting the full width from their parent.

Floating an element within the parent disrupts the normal flow, potentially leading to unwanted effects for other elements inside the parent. For instance, siblings following in the normal flow might position themselves as though the floating element wasn't there, with their text starting just below it.

Is it unnecessary to use both "width: inherit" and "float: none

Answer №1

Similar questions

Identifying page elements in Protractor when they lack obvious identifiable properties

Flowing vertically and horizontally while adjusting line height within the <small> HTML tag

I require displaying the initial three letters of the term "basketball" and then adding dots

display upcoming schedule and time

Basic node.js server that responds with HTML and CSS

Tips for adjusting the font size according to the varying number of characters entered

Can a PHP variable be passed along with a div ID in any way?

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Steps for resetting the ng-multiselect-dropdown

Animate the entire paragraph with CSS hover effect

Unlocking the potential of the :not selector when combined with the :nth-of-type selector

Pulling Specific HTML Element from External Website with PHP

Displaying images in Dash Python by utilizing external Javascript

How can content be kept from dropping below a stationary header?

Issue: The function view.hlp(...) is not recognized within jsrender

unable to format radio button list

Show whether the day is even or odd with the JavaScript getDay object

The beginning of my HTML input is not at the top of the page

Ways to align an image and text vertically next to each other within a div

How to horizontally center an element using HTML and CSS